lifecycle-methods.md

Lifecycle Methods

Method	Purpose	Details
render()	The only required method in component. Should return one of the following: JSX element (HTML or component), fragments, array, portal, string, number and boolean or null for conditional render. Won't be called if shouldComponentUpdate() returns false.	Should be pure, i.e., does not affect state, always returns the same results, does not interact with browser and does not perform any side effects.
constructor(props)	Mainly used for two things: init state and bind event handlers.	Initial state must be set with this.state assignment rather than with setState() method (unlike other methods).
componentDidMount()	A place for side effects (like fetching data from API) and subscriptions.	If some state prop depends on DOM (e.g., modal, tooltip), setState() can be used here.
componentDidUpdate(prevProps, prevState, snapshot)	Fired after an update (not after the first render). It is a place for manipulating DOM or fetching data when props changed (won't be called if shouldComponentUpdate() returns false).	Call of setState() without a condition will result in the infinite loop.
componentWillUnmount()	A place for clean-ups: timers, subscritions, requests.	You shouldn't call setState() here as component will not be re-rendered.
LESS COMMON METHODS
shouldComponentUpdate(nextProps, nextState)	Called before a render, when new props and state are being received (not called for the initial render and when forceUpdate() is fired).	It's not recommended to perform deep comparisons or use JSON.stringify() as it may cause performance issues.
static getDerivedStateFromProps(props, state)	Called just before render(), should return an object updating state or null to update nothing. In React 16.3, called after constructor and addition of new props, as of React 16.4, additionally it's caled after setState() and forceUpdate() methods.	This method is unable to access an instance of a component.
getSnapshotBeforeUpdate(prevProps, prevState)	Called just before the newest results are to impact DOM. Can get information from DOM, like position of a scrollbar, before it gets changed.	Returned value is passed as a third argument of componentDidUpdate() method (undefined if this method returns null).
static getDerivedStateFromError(error)	Called when exception is thrown in a child component. Returns value that will update state (e.g., alternative UI can be rendered in case of error).	Side effects are not allowed here, do it in componentDidCatch() instead.
componentDidCatch(error, info)	Called when exception is thrown in a child component.	In development environment, errors do reach window (window.onerror will handle them along with this method). In production environment, upper error boundaries will only receive errors if their children don't catch them with this method.

Deprecated Methods

• UNSAFE_componentWillMount() - use constructor for defining state or componentDidMount for side effects and subscriptions
• UNSAFE_componentWillReceiveProps(nextProps) - use getDerivedStateFromProps with componentDidUpdate if needed
• UNSAFE__componentWillUpdate(nextProps, nextState) - use getSnapshotBeforeUpdate with componentDidUpdate if needed

Phases

Phase	Description	Methods
Render	Pure and has no side effects. May be paused, aborted or restarted by React.	constructor(), getDerivedStateFromProps(), shouldComponentUpdate(), render()
Pre-commit	Can read the DOM.	getSnapshotBeforeUpdate()
Commit	Can work with DOM, run side effects, schedule updates.	componentDidMount(), componentDidUpdate(), componentWillUnmount()

Source: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram