React 17 lifecycle

Legacy lifecycle methods have too many potential pitfalls to be safely used for async rendering.

static getDerivedStateFromProps(nextProps, prevState)

getSnapshotBeforeUpdate(prevProps, prevState)

Deprecated functions

  • componentWillMountUNSAFE_componentWillMount
  • componentWillReceivePropsUNSAFE_componentWillReceiveProps
  • componentWillUpdateUNSAFE_componentWillUpdate

What to do / not to do in React 17 with old lifecycle to get all async rendering benefits:

constructor

  • set initial state
  • if not using class properties syntax — prepare all class fields and bind functions that will be passed as callbacks
  • cause any side effects (AJAX calls etc.)

deprecated — componentWillMount

  • update state via this.setState
  • perform last minute optimization
  • cause side-effects (AJAX calls etc.) in case of server-side-rendering only
  • cause any side effects (AJAX calls etc.) on client side

deprecated — componentWillReceiveProps(nextProps)

  • sync state to props
  • cause any side effects (AJAX calls etc.)

shouldComponentUpdate(nextProps, nextState, nextContext)

  • use for increasing performance of poor performing Components
  • cause any side effects (AJAX calls etc.)
  • call this.setState

deprecated — componentWillUpdate(nextProps, nextState)

  • synchronize state to props
  • cause any side effects (AJAX calls etc.)

componentDidUpdate(prevProps, prevState, snapshot)

  • cause side effects (AJAX calls etc.)
  • call this.setState as it will result in a re-render

componentDidMount

  • cause side effects (AJAX calls etc.)
  • call this.setState as it will result in a re-render

componentWillUnmount

  • remove any timers or listeners created in lifespan of the component
  • call this.setState, start new listeners or timers

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

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Valerii Sukhov

Valerii Sukhov

Developer

More from Medium

Welcome To React

OPTIMIZATION TECHNIQUES FOR REACT

How to make a table in React with React Table Library

React.js tips for better performance. Part 1