Skip to content

Commit 08b71d9

Browse files
authored
Merge pull request reactjs#1468 from bvaughn/UNSAFE_componentWillReceiveProps-deprecation-wording
Changed wording about UNSAFE_componentWillReceiveProps deprecation
2 parents a414816 + 9e8bfd6 commit 08b71d9

File tree

1 file changed

+16
-20
lines changed

1 file changed

+16
-20
lines changed

content/docs/reference-react-component.md

+16-20
Original file line numberDiff line numberDiff line change
@@ -430,16 +430,16 @@ The lifecycle methods below are marked as "legacy". They still work, but we don'
430430
UNSAFE_componentWillMount()
431431
```
432432

433+
> Note
434+
>
435+
> This lifecycle was previously named `componentWillMount`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
436+
433437
`UNSAFE_componentWillMount()` is invoked just before mounting occurs. It is called before `render()`, therefore calling `setState()` synchronously in this method will not trigger an extra rendering. Generally, we recommend using the `constructor()` instead for initializing state.
434438

435439
Avoid introducing any side-effects or subscriptions in this method. For those use cases, use `componentDidMount()` instead.
436440

437441
This is the only lifecycle method called on server rendering.
438442

439-
> Note
440-
>
441-
> This lifecycle was previously named `componentWillMount`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
442-
443443
* * *
444444

445445
### `UNSAFE_componentWillReceiveProps()`
@@ -448,30 +448,26 @@ This is the only lifecycle method called on server rendering.
448448
UNSAFE_componentWillReceiveProps(nextProps)
449449
```
450450

451+
> Note
452+
>
453+
> This lifecycle was previously named `componentWillReceiveProps`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
454+
451455
> Note:
452456
>
453-
> Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be deprecated in the future.
457+
> Using this lifecycle method often leads to bugs and inconsistencies
454458
>
455-
> If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead.
459+
> * If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead.
460+
> * If you used `componentWillReceiveProps` for **re-computing some data only when a prop changes**, [use a memoization helper instead](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization).
461+
> * If you used `componentWillReceiveProps` to **"reset" some state when a prop changes**, consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
456462
>
457463
> For other use cases, [follow the recommendations in this blog post about derived state](/blog/2018/06/07/you-probably-dont-need-derived-state.html).
458-
>
459-
> If you used `componentWillReceiveProps` for **re-computing some data only when a prop changes**, [use a memoization helper instead](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization).
460-
>
461-
> If you used `componentWillReceiveProps` to **"reset" some state when a prop changes**, consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
462-
>
463-
> In very rare cases, you might want to use the [`getDerivedStateFromProps`](#static-getderivedstatefromprops) lifecycle as a last resort.
464464
465465
`UNSAFE_componentWillReceiveProps()` is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare `this.props` and `nextProps` and perform state transitions using `this.setState()` in this method.
466466

467467
Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.
468468

469469
React doesn't call `UNSAFE_componentWillReceiveProps()` with initial props during [mounting](#mounting). It only calls this method if some of component's props may update. Calling `this.setState()` generally doesn't trigger `UNSAFE_componentWillReceiveProps()`.
470470

471-
> Note
472-
>
473-
> This lifecycle was previously named `componentWillReceiveProps`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
474-
475471
* * *
476472

477473
### `UNSAFE_componentWillUpdate()`
@@ -480,16 +476,16 @@ React doesn't call `UNSAFE_componentWillReceiveProps()` with initial props durin
480476
UNSAFE_componentWillUpdate(nextProps, nextState)
481477
```
482478

479+
> Note
480+
>
481+
> This lifecycle was previously named `componentWillUpdate`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
482+
483483
`UNSAFE_componentWillUpdate()` is invoked just before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
484484

485485
Note that you cannot call `this.setState()` here; nor should you do anything else (e.g. dispatch a Redux action) that would trigger an update to a React component before `UNSAFE_componentWillUpdate()` returns.
486486

487487
Typically, this method can be replaced by `componentDidUpdate()`. If you were reading from the DOM in this method (e.g. to save a scroll position), you can move that logic to `getSnapshotBeforeUpdate()`.
488488

489-
> Note
490-
>
491-
> This lifecycle was previously named `componentWillUpdate`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
492-
493489
> Note
494490
>
495491
> `UNSAFE_componentWillUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.

0 commit comments

Comments
 (0)