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_componentWillMount
• componentWillReceiveProps — UNSAFE_componentWillReceiveProps
• componentWillUpdate — 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.setState as it will result in a re-render

componentDidMount

DO

• cause side effects (AJAX calls etc.)

DON’T

• call this.setState as 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

And don’t forget the real essence of frontend developer life: