From e3cf355618769fc1d4a535caec8a525a48eff7c5 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 1 May 2018 13:11:08 +0100 Subject: [PATCH] Tweak componentWillReceiveProps docs (#856) * Tweak componentWillReceiveProps docs * Update reference-react-component.md --- content/docs/reference-react-component.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index ce7b66a3..71ff51a3 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -193,8 +193,6 @@ static getDerivedStateFromProps(nextProps, prevState) Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. You may want to compare new and previous values if you only want to handle changes. -Calling `this.setState()` generally doesn't trigger `getDerivedStateFromProps()`. - * * * ### `UNSAFE_componentWillMount()` @@ -237,7 +235,9 @@ UNSAFE_componentWillReceiveProps(nextProps) > Note > -> It is recommended that you use the static [`getDerivedStateFromProps`](#static-getderivedstatefromprops) lifecycle instead of `UNSAFE_componentWillReceiveProps`. [Learn more about this recommendation here.](/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes) +> It is not recommended to use this lifecycle in the new code. If you need to calculate next state based on a change in props, use the static [`getDerivedStateFromProps`](#static-getderivedstatefromprops) lifecycle. 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. For some use cases, you need to use both: `getDerivedStateFromProps` for a calculation, and `componentDidUpdate` for a side effect. +> +>[Learn more about this recommendation here.](/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes) `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.