Fixed invalid getSnapshotBeforeUpdate() example code (#799)

* Fixed invalid getSnapshotBeforeUpdate() example code

* Don't use class properties in stable docs

examples/react-component-reference/get-snapshot-before-update.js

@@ -1,11 +1,15 @@
 class ScrollingList extends React.Component {
-  listRef = React.createRef();
+  constructor(props) {
+    super(props);
+    this.listRef = React.createRef();
+  }
 
   getSnapshotBeforeUpdate(prevProps, prevState) {
     // Are we adding new items to the list?
-    // Capture the current height of the list so we can adjust scroll later.
+    // Capture the scroll position so we can adjust scroll later.
     if (prevProps.list.length < this.props.list.length) {
-      return this.listRef.current.scrollHeight;
+      const list = this.listRef.current;
+      return list.scrollHeight - list.scrollTop;
     }
     return null;
   }
@@ -13,9 +17,10 @@ class ScrollingList extends React.Component {
   componentDidUpdate(prevProps, prevState, snapshot) {
     // If we have a snapshot value, we've just added new items.
     // Adjust scroll so these new items don't push the old ones out of view.
+    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
     if (snapshot !== null) {
-      this.listRef.current.scrollTop +=
-        this.listRef.current.scrollHeight - snapshot;
+      const list = this.listRef.current;
+      list.scrollTop = list.scrollHeight - snapshot;
     }
   }
 

examples/update-on-async-rendering/react-dom-properties-before-update-after.js

@@ -1,12 +1,14 @@
 class ScrollingList extends React.Component {
   listRef = null;
 
-  // highlight-range{1-8}
+  // highlight-range{1-10}
   getSnapshotBeforeUpdate(prevProps, prevState) {
     // Are we adding new items to the list?
-    // Capture the current height of the list so we can adjust scroll later.
+    // Capture the scroll position so we can adjust scroll later.
     if (prevProps.list.length < this.props.list.length) {
-      return this.listRef.scrollHeight;
+      return (
+        this.listRef.scrollHeight - this.listRef.scrollTop
+      );
     }
     return null;
   }
@@ -17,7 +19,7 @@ class ScrollingList extends React.Component {
     // Adjust scroll so these new items don't push the old ones out of view.
     // (snapshot here is the value returned from getSnapshotBeforeUpdate)
     if (snapshot !== null) {
-      this.listRef.scrollTop +=
+      this.listRef.scrollTop =
         this.listRef.scrollHeight - snapshot;
     }
   }

examples/update-on-async-rendering/react-dom-properties-before-update-before.js

@@ -1,25 +1,26 @@
 class ScrollingList extends React.Component {
   listRef = null;
-  previousScrollHeight = null;
+  previousScrollOffset = null;
 
-  // highlight-range{1-7}
+  // highlight-range{1-8}
   componentWillUpdate(nextProps, nextState) {
     // Are we adding new items to the list?
-    // Capture the current height of the list so we can adjust scroll later.
+    // Capture the scroll position so we can adjust scroll later.
     if (this.props.list.length < nextProps.list.length) {
-      this.previousScrollHeight = this.listRef.scrollHeight;
+      this.previousScrollOffset =
+        this.listRef.scrollHeight - this.listRef.scrollTop;
     }
   }
 
   // highlight-range{1-10}
   componentDidUpdate(prevProps, prevState) {
-    // If previousScrollHeight is set, we've just added new items.
+    // If previousScrollOffset is set, we've just added new items.
     // Adjust scroll so these new items don't push the old ones out of view.
-    if (this.previousScrollHeight !== null) {
-      this.listRef.scrollTop +=
+    if (this.previousScrollOffset !== null) {
+      this.listRef.scrollTop =
         this.listRef.scrollHeight -
-        this.previousScrollHeight;
-      this.previousScrollHeight = null;
+        this.previousScrollOffset;
+      this.previousScrollOffset = null;
     }
   }