From 7351d11a897c90028fc64858d7b5678bc5a64565 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Fri, 13 Apr 2018 06:41:27 -0700
Subject: [PATCH] Fixed invalid getSnapshotBeforeUpdate() example code (#799)

* Fixed invalid getSnapshotBeforeUpdate() example code

* Don't use class properties in stable docs
---
 .../get-snapshot-before-update.js             | 15 ++++++++++-----
 ...eact-dom-properties-before-update-after.js | 10 ++++++----
 ...act-dom-properties-before-update-before.js | 19 ++++++++++---------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/examples/react-component-reference/get-snapshot-before-update.js b/examples/react-component-reference/get-snapshot-before-update.js
index e8d8d299..cf1fb233 100644
--- a/examples/react-component-reference/get-snapshot-before-update.js
+++ b/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;
     }
   }
 
diff --git a/examples/update-on-async-rendering/react-dom-properties-before-update-after.js b/examples/update-on-async-rendering/react-dom-properties-before-update-after.js
index 2fc188aa..c32b3df5 100644
--- a/examples/update-on-async-rendering/react-dom-properties-before-update-after.js
+++ b/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;
     }
   }
diff --git a/examples/update-on-async-rendering/react-dom-properties-before-update-before.js b/examples/update-on-async-rendering/react-dom-properties-before-update-before.js
index ad26b4e8..042dd670 100644
--- a/examples/update-on-async-rendering/react-dom-properties-before-update-before.js
+++ b/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;
     }
   }