Docs

React Lifecycle Methods Diagram

• constructor(props)
• render()
• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

• constructor(props)
  • called before it is mounted
• static getDerivedStateFromProps(props, state)
  • invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
• render()
• componentDidMount()
  • invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

• static getDerivedStateFromProps(props, state)
  • invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
• shouldComponentUpdate(nextProps, nextState)
  • invoked before rendering when new props or state are being received
  • returns boolean which determines if render should be called
• render()
• getSnapshotBeforeUpdate(prevProps, prevState)
  • invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate()
• componentDidUpdate(prevProps, prevState)
  • invoked immediately after updating occurs. This method is not called for the initial render
  • watch out for infinite loops if setting state!

• componentWillUnmount()
  • invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().