React 17 lifecycle
The React team has decided to deprecate some of the lifecycle methods with React 17. A recent blog post from the reactjs team reveals the future of component lifecycle methods.
Why did they decide to get rid of them? The original lifecycle model was not intended for some of the upcoming features like async rendering. With the introduction of async rendering, some of these lifecycle methods will be unsafe if used.
Legacy lifecycle methods have too many potential pitfalls to be safely used for async rendering.
static getDerivedStateFromProps(nextProps, prevState)
The new function which main responsibility is ensuring that the state and props are in sync for when it is required. It’s main job is replacing componentWillReceiveProps
gDSFP is a static function and as such has no access to this — you are instead expected to return an object, which will be merged into the future state of the component (exactly like working with setState!)
The function is used when a component is updated but also when it is mounted, right after the constructor was called, so you no longer need to use constructor or class property form of state if you want to set initial state from props.
getSnapshotBeforeUpdate(prevProps, prevState)
Other of the two new functions, invoked in the so called “pre-commit phase”, right before the changes from VDOM are to be reflected in the DOM.
It is usable mostly if you need to read the current DOM state, for example you have an application in which new messages are added to the top of the screen — if a user scrolled down, and a new message is added the screen could move and make the UI harder to use. By adding getSnapshotBeforeUpdate you can calculate current scroll position and maintain it through the DOM update.
Even though the function is not static, it is recommended to return the value, not update the component. The returned value will be passed to componentDidUpdate as the 3rd parameter.
Deprecated functions
While the new functions are there to make your transition to AsyncMode easier, you are not forced to migrate all your code. The following functions will be marked as deprecated and in later releases renamed:
componentWillMount—UNSAFE_componentWillMountcomponentWillReceiveProps—UNSAFE_componentWillReceivePropscomponentWillUpdate—UNSAFE_componentWillUpdate
You will start seeing the deprecation warnings in next major version, and the function will be removed (the renamed versions will be kept!) in version 17.0
What to do / not to do in React 17 with old lifecycle to get all async rendering benefits:
constructor
DO
- set initial state
- if not using class properties syntax — prepare all class fields and bind functions that will be passed as callbacks
DON’T
- cause any side effects (AJAX calls etc.)
deprecated — componentWillMount
DO
- update state via
this.setState - perform last minute optimization
- cause side-effects (AJAX calls etc.) in case of server-side-rendering only
DON’T
- cause any side effects (AJAX calls etc.) on client side
deprecated — componentWillReceiveProps(nextProps)
DO
- sync state to props
DON’T
- cause any side effects (AJAX calls etc.)
shouldComponentUpdate(nextProps, nextState, nextContext)
DO
- use for increasing performance of poor performing Components
DON’T
- cause any side effects (AJAX calls etc.)
- call
this.setState
deprecated — componentWillUpdate(nextProps, nextState)
DO
- synchronize state to props
DON’T
- cause any side effects (AJAX calls etc.)
componentDidUpdate(prevProps, prevState, snapshot)
DO
- cause side effects (AJAX calls etc.)
DON’T
- call
this.setStateas it will result in a re-render
componentDidMount
DO
- cause side effects (AJAX calls etc.)
DON’T
- call
this.setStateas it will result in a re-render
componentWillUnmount
DO
- remove any timers or listeners created in lifespan of the component
DON’T
- call
this.setState, start new listeners or timers
