React Lifecycle Methods Cheat Sheet
React’s lifecycle methods give us specific points at which to tap into the ‘lifecycle’ of a component (and it’s children) and provide an organized structure in which to interact with components as they are mounted, rendered, updated, and unmounted as state changes.
This post is intended to be a quick guide into the component lifecycle methods for easy reference. They are listed in the order which they are invoked.
componentWillMount( )
Invoked once on client and server before the initial rendering occurs (before component.render is called). Load initial data here with an AJAX call.
component.render( )
Every component requires a render method. This is a 'pure' method, meaning that it will return the same result every time it is invoked.
The render method exclusively examines this.props and this.state and must return a single child element, null, or false if nothing should be rendered. If it is being called in a parent component, the children can be placed within a it’s opening and closing tags, e.g. {this.props.children}.
It doesn’t read from or write to the DOM, interact with the browser, or modify component state.
componentDidMount( )
Invoked only on the client after rendering has completed. This method has access to a component’s children (and their DOM representation) and you can can use setTimeout, events, or AJAX calls here.
componentWillReceiveProps( nextProps )
Invoked when a component is receiving new props. This is an opportunity to react to prop transitions. This method may or may not cause a state change using this.setState( { prop: value } ).
shouldComponentUpdate( {newProps}, {newState} )
If new props/state is being received by a component, this method is invoked before render happens. Returns true by default, return false to skip render. If it returns true, the rest of the lifecycle methods below will be invoked.
componentWillUpdate( {nextProps}, {nextState} )
Invoked immediately before render as an opportunity to prepare for update. You cannot use this.setState() here. Use componentWillReceiveProps instead.
componentDidUpdate( {prevProps}, {prevState} )
Invoked after component’s state changes and updates are applied to the DOM. It is acceptable to operate on the DOM here.
componentWillUnmount( )
Before a component is unmounted, this method is called. Any necessary cleanup goes here (e.g. invalidating timers, changing DOM elements, etc.).
And that’s it! It seems like a lot for simple changes in state, but each of these methods correspond to a specific point during the lifecycle of a component and allow maximum control over the rendering of that component. It will probably not be necessary to customize and utilize each one of these methods for each component, but the option is there.
Happy Reacting!