Update example lifecycle methods (#3218)

* update async example * update real world example * update demo code in docs * replace componentWillMount * remove lock files * replace nextProps with prevProps * remove lockfile * fix prevProps -> this.props
reduxjs · Nov 21, 2018 · 691b9e4 · 691b9e4
1 parent afd762f
commit 691b9e4
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 23 deletions.
diff --git a/docs/api/applyMiddleware.md b/docs/api/applyMiddleware.md
@@ -172,9 +172,9 @@ class SandwichShop extends Component {
     this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.forPerson !== this.props.forPerson) {
-      this.props.dispatch(makeASandwichWithSecretSauce(nextProps.forPerson))
+  componentDidUpdate(prevProps) {
+    if (prevProps.forPerson !== this.props.forPerson) {
+      this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
     }
   }
 

diff --git a/docs/recipes/ReducingBoilerplate.md b/docs/recipes/ReducingBoilerplate.md
@@ -221,9 +221,9 @@ class Posts extends Component {
     this.loadData(this.props.userId)
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.userId !== this.props.userId) {
-      this.loadData(nextProps.userId)
+  componentDidUpdate(prevProps) {
+    if (prevProps.userId !== this.props.userId) {
+      this.loadData(this.props.userId)
     }
   }
 
@@ -306,9 +306,9 @@ class Posts extends Component {
     this.props.dispatch(loadPosts(this.props.userId))
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.userId !== this.props.userId) {
-      this.props.dispatch(loadPosts(nextProps.userId))
+  componentDidUpdate(prevProps) {
+    if (prevProps.userId !== this.props.userId) {
+      this.props.dispatch(loadPosts(this.props.userId))
     }
   }
 

diff --git a/examples/async/src/containers/App.js b/examples/async/src/containers/App.js
@@ -19,9 +19,9 @@ class App extends Component {
     dispatch(fetchPostsIfNeeded(selectedSubreddit))
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.selectedSubreddit !== this.props.selectedSubreddit) {
-      const { dispatch, selectedSubreddit } = nextProps
+  componentDidUpdate(prevProps) {
+    if (prevProps.selectedSubreddit !== this.props.selectedSubreddit) {
+      const { dispatch, selectedSubreddit } = this.props
       dispatch(fetchPostsIfNeeded(selectedSubreddit))
     }
   }

diff --git a/examples/real-world/src/components/Explore.js b/examples/real-world/src/components/Explore.js
@@ -11,9 +11,9 @@ export default class Explore extends Component {
     onChange: PropTypes.func.isRequired
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.props.value) {
-      this.setInputValue(nextProps.value)
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setInputValue(this.props.value)
     }
   }
 

diff --git a/examples/real-world/src/containers/RepoPage.js b/examples/real-world/src/containers/RepoPage.js
@@ -27,13 +27,13 @@ class RepoPage extends Component {
     loadStargazers: PropTypes.func.isRequired
   }
 
-  componentWillMount() {
+  componentDidMount() {
     loadData(this.props)
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.fullName !== this.props.fullName) {
-      loadData(nextProps)
+  componentDidUpdate(prevProps) {
+    if (prevProps.fullName !== this.props.fullName) {
+      loadData(this.props.fullName)
     }
   }
 

diff --git a/examples/real-world/src/containers/UserPage.js b/examples/real-world/src/containers/UserPage.js
@@ -26,13 +26,13 @@ class UserPage extends Component {
     loadStarred: PropTypes.func.isRequired
   }
 
-  componentWillMount() {
+  componentDidMount() {
     loadData(this.props)
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.login !== this.props.login) {
-      loadData(nextProps)
+  componentDidUpdate(prevProps) {
+    if (prevProps.login !== this.props.login) {
+      loadData(this.props.login)
     }
   }