Docs - Replace use of deprecated lifecycle methods with the methods r… #6313

jmuzsik · 2018-08-30T17:28:52Z

Replace use of deprecated lifecycle methods with the methods recommended by the React team in the documentation.

I am not sure if the automatic editing of the files because of this precommit hook: "precommit": "pretty-quick --staged" was supposed to happen but I assume that the style changes are desired. All I changed was replacing componentWillReceiveProps with componentDidUpdate and add one sentence that it is not recommended to use the lifecycle methods that are soon to be deprecated with a link that explains.

I used componentDidUpdate in each example as that is what is recommended: Check out Abramov comment.

Also, if desired, I can go through the docs and make sure that each page in the docs gets the precommit hook and send another quick PR.

Thanks!

timdorr · 2018-08-30T18:18:14Z

packages/react-router/docs/api/history.md


 ## history is mutable

 The history object is mutable. Therefore it is recommended to access the [`location`](./location.md) from the render props of [`<Route>`](./Route.md), not from `history.location`. This ensures your assumptions about React are correct in lifecycle hooks. For example:

 ```jsx
 class Comp extends React.Component {
-  componentWillReceiveProps(nextProps) {
+  componentDidMount(nextProps) {


I think you mean cDU here.

timdorr · 2018-08-30T18:19:43Z

packages/react-router/docs/guides/migrating.md

 ```

 ### `on*` properties

 React Router v3 provides `onEnter`, `onUpdate`, and `onLeave` methods. These were essentially recreating React's lifecycle methods.

-With v4, you should use the lifecycle methods of the component rendered by a `<Route>`. Instead of `onEnter`, you would use `componentDidMount` or `componentWillMount`. Where you would use `onUpdate`, you can use `componentDidUpdate` or `componentWillUpdate` (or possibly `componentWillReceiveProps`). `onLeave` can be replaced with `componentWillUnmount`.
+With v4, you should use the lifecycle methods of the component rendered by a `<Route>`. Instead of `onEnter`, you would use `componentDidMount` or `componentWillMount`. Where you would use `onUpdate`, you can use `componentDidUpdate` or `componentWillUpdate` (or possibly `componentWillReceiveProps`). `onLeave` can be replaced with `componentWillUnmount`. Though, `componentWillUpdate`, `componentWillReceiveProps`, and `componentWillUnmount` will [soon be deprecated](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html).


componentWillUnmount is not deprecated. componentWillMount is, though.

timdorr · 2018-08-30T18:20:08Z

packages/react-router-config/README.md

@@ -134,7 +139,7 @@ class PendingNavDataLoader extends Component {
    previousLocation: null
  }

-  componentWillReceiveProps(nextProps) {
+  componentDidMount(nextProps) {


Did you mean cDU?

timdorr · 2018-08-30T18:20:25Z

packages/react-router-native/docs/guides/animation.md

@@ -18,7 +18,7 @@ class Sidebar extends Component {
    )
  }

-  componentWillReceiveProps(nextProps) {
+  (nextProps) {


There is no method name here.

timdorr · 2018-08-30T18:20:41Z

packages/react-router-native/docs/guides/animation.md


-  componentWillReceiveProps(nextProps) {
+  componentDidMount(nextProps) {


Same here. Probably meant componentDidUpdate.

timdorr · 2018-08-30T18:20:51Z

packages/react-router-native/docs/guides/animation.md

  }
 }
 ```

-Hope that helps get you thinking. Again, the animations themselves are the same with the router or not, the difference is knowing when to trigger them. Here's a list for things to check in `componentWillReceiveProps` to decide what to do with an animation based on the router's location:
+Hope that helps get you thinking. Again, the animations themselves are the same with the router or not, the difference is knowing when to trigger them. Here's a list for things to check in `componentDidMount` to decide what to do with an animation based on the router's location:


timdorr · 2018-08-30T18:21:01Z

packages/react-router/docs/api/location.md


 It is also found on `history.location` but you shouldn't use that because its mutable. You can read more about that in the [history](./history.md) doc.

 A location object is never mutated so you can use it in the lifecycle hooks to determine when navigation happens, this is really useful for data fetching and animation.

 ```js
-componentWillReceiveProps(nextProps) {
+componentDidMount(nextProps) {


packages/react-router-config/README.md

timdorr · 2018-08-30T18:54:49Z

packages/react-router-native/docs/guides/animation.md

@@ -18,7 +18,7 @@ class Sidebar extends Component {
    )
  }

-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {


Same prevProps change here.

timdorr · 2018-08-30T18:54:58Z

packages/react-router-native/docs/guides/animation.md


-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {


timdorr · 2018-08-30T18:55:08Z

packages/react-router/docs/api/history.md


 ## history is mutable

 The history object is mutable. Therefore it is recommended to access the [`location`](./location.md) from the render props of [`<Route>`](./Route.md), not from `history.location`. This ensures your assumptions about React are correct in lifecycle hooks. For example:

 ```jsx
 class Comp extends React.Component {
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {


timdorr · 2018-08-30T18:55:16Z

packages/react-router/docs/api/location.md


 It is also found on `history.location` but you shouldn't use that because its mutable. You can read more about that in the [history](./history.md) doc.

 A location object is never mutated so you can use it in the lifecycle hooks to determine when navigation happens, this is really useful for data fetching and animation.

 ```js
-componentWillReceiveProps(nextProps) {
+componentDidUpdate(nextProps) {


Aaaaand here.

timdorr · 2018-08-30T18:55:39Z

Sorry for the pedantry!

jmuzsik · 2018-08-30T18:56:25Z

No problem!

timdorr · 2018-08-30T20:43:39Z

packages/react-router-native/docs/guides/animation.md

-    const navigatingToParent = nextProps.atParent && !this.props.atParent
-    const animationEnded = this.props.animating && !nextProps.animating
+    const navigatingToParent = prevProps.atParent && !this.props.atParent;
+    const animationEnded = this.props.animating && !prevProps.animating;


This one actually does need to be swapped around because it's checking if we were animating before and are no longer animating now.

timdorr · 2018-08-30T20:44:35Z

packages/react-router-config/README.md

      })

      // load data while the old screen remains
-      loadNextData(routes, nextProps.location).then((data) => {
+      loadNextData(routes, prevProps.location).then((data) => {


This should be this.props.location.

timdorr · 2018-08-30T20:45:57Z

packages/react-router-native/docs/guides/animation.md

 ```

 Going from child to parent:

 ```js
-nextProps.match.isExact && !this.props.match.isExact
+prevProps.match.isExact && !this.props.match.isExact;


This and the one a few lines down also need to be swapped for similar reasons.

…ecommened by React team

frehner · 2018-09-19T02:00:25Z

I totally missed this when I created #6341 -- hopefully there aren't too many (if any) conflicts in the changes to the docs. If there are, I can take a look at reconciling them when this is merged (if this is merged first).

jmuzsik · 2018-09-19T03:26:20Z

No problem, I haven't looked at this for a while as Tim vanished suddenly. If Tim wants to close this and pull yours in to keep things simple, do so by all means! No worries.

timdorr · 2018-09-19T13:52:47Z

I'm here! I just have a lot of issues/PRs to go through daily, so I missed the update here :/

timdorr reviewed Aug 30, 2018

View reviewed changes

packages/react-router-config/README.md Outdated Show resolved Hide resolved

timdorr reviewed Aug 30, 2018

View reviewed changes

Docs - Replace use of deprecated lifecycle methods with the methods r…

ddbe38f

…ecommened by React team

timdorr closed this Sep 19, 2018

lock bot locked as resolved and limited conversation to collaborators Nov 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs - Replace use of deprecated lifecycle methods with the methods r… #6313

Docs - Replace use of deprecated lifecycle methods with the methods r… #6313

jmuzsik commented Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr commented Aug 30, 2018

jmuzsik commented Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

timdorr Aug 30, 2018

frehner commented Sep 19, 2018

jmuzsik commented Sep 19, 2018

timdorr commented Sep 19, 2018


		componentWillReceiveProps(nextProps) {
		componentDidMount(nextProps) {


		componentWillReceiveProps(nextProps) {
		componentDidUpdate(nextProps) {

Docs - Replace use of deprecated lifecycle methods with the methods r… #6313

Docs - Replace use of deprecated lifecycle methods with the methods r… #6313

Conversation

jmuzsik commented Aug 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timdorr commented Aug 30, 2018

jmuzsik commented Aug 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frehner commented Sep 19, 2018

jmuzsik commented Sep 19, 2018

timdorr commented Sep 19, 2018