Skip to content

Latest commit

 

History

History
19 lines (10 loc) · 2.13 KB

componentWillReceiveProps.md

File metadata and controls

19 lines (10 loc) · 2.13 KB

componentWillReceiveProps()

Be wary of whether you need the current or next prop

A common use case is using callbacks passed as props to react to prop changes. Keep in mind that these callbacks can also change: for example, they may use the parent's own props. Thus, if you are reacting to something in nextProps, you probably want to call nextProps.callback() instead of this.props.callback(). Even if the functions are identical, you almost always want nextProps.callback() just on the off chance that the function DID change.

Consider using componentDidUpdate()

If you have do something with props based on a prop update, it can be awkward to use nextProps passed by componentWillReceiveProps() if you want to call other class methods, which may access this.props. If you want to react on next props rather than current props, calling class methods will result in using "outdated" props.

Using componentDidUpdate() means that class methods will have the correct props. The caveat is that extra renders may occur, because you are responding to the prop change after the render caused by the prop change completes. This should be weighed against the elegance of not having to make class methods accept nextProps as arguments.

Finally, componentDidUpdate() prevents the common mistake described in the previous section, where this.props.foo is used for something where nextProps.foo was intended.

Consider using helper functions that take (currProps, nextProps)

Other than render(), componentWillReceiveProps() often become the longest functions in a component, and usually, various different responsibilities are being handled, making the function exceptionally difficult to read and refactor. For example, a componentWillReceiveProps() may be responsible for flushing outdated state, handling fetches, updating dependent form fields, etc.

Consider writing functions that that take (currProps, nextProps) which each handle one of these responsibilities. This can make future refactoring much more pleasant, because now responsibilities are distributed across various functions, rather than living in one gigantic method.