Understanding React — Component life-cycle

Update:

React 16.3 introduced two more life-cycle methods and depracated few of them, be sure to check up the follow-up at https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

constructor

constructors are the basic of OOP — this is a special function that will get called whenever a new object is created. It’s very important to call a special function super in cases where our class extends any other class that also has a defined constructor. Calling this special function will call the constructor of our parent class and allow it to initialize itself. This is why we have access to this.props only after we’ve initially called super.

  • 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

This is a somehow special case — componentWillMount does not differ much from constructor - it is also called once only in the initial mounting life-cycle. Historically there were some reasons to use componentWillMountover constructor see this react-redux issue but please keep in mind that the practice described there is since deprecated.

  • 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)

This function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the props passed, no matter if the prop value has changed or not since previous re-render phase.

componentWillReceiveProps(nextProps) {
if(nextProps.myProp !== this.props.myProps) {
// nextProps.myProp has a different value than our current prop
// so we can perform some calculations based on the new value
}
}
  • sync state to props
  • cause any side effects (AJAX calls etc.)

shouldComponentUpdate(nextProps, nextState, nextContext)

By default, all class based Components will re-render themselves whenever the props they receiver, their state or context changes. If re-rendering the component is computation heavy (e.g. generating a chart) or is not recommended for some performance reasons, the developer is given access to a special function which will be called in the update cycle.

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

deprecated — componentWillUpdate(nextProps, nextState)

If the shouldComponentUpdate function is not implemented, or it decided that the component should update in this render cycle, another life-cycle function will be called. This function is commonly used to perform state and props synchronization for when parts of your state are based on props.

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

componentDidUpdate(prevProps, prevState, prevContext)

This function will be called after render is finished in each of the re-render cycles. This means that you can be sure that the component and all its sub-components have properly rendered itself.

componentDidUpdate(prevProps) {
if(prevProps.myProps !== this.props.myProp) {
// this.props.myProp has a different value
// we can perform any operations that would
// need the new value and/or cause side-effects
// like AJAX calls with the new value - this.props.myProp
}
}
  • cause side effects (AJAX calls etc.)
  • call this.setState as it will result in a re-render

componentDidCatch(errorString, errorInfo)

A new addition in React 16 — this life-cycle method is special in way that it can react to events happening in the child component, specifically to any uncaught errors happening in any of the child components.

componentDidCatch(errorString, errorInfo) {
this.setState({
error: errorString
});
ErrorLoggingTool.log(errorInfo);
}
render() {
if(this.state.error) return <ShowErrorMessage error={this.state.error} />
return (
// render normal component output
);
}
  • errorString — the .toString() message of the error
  • errorInfo — an object with a single field componentStack which represent the stack trace back to where the error occured, e.g.:
in Thrower
in div (created by App)
in App

componentDidMount

This function will be called only once in the whole life-cycle of a given component and it being called signalizes that the component — and all its sub-components — rendered properly.

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

componentWillUnmount

Use this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close / remove when no longer needed.

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

Component cycles

There are multiple reasons a component might re-render, and in each of them different functions are called allowing the developer to update certain parts of the Component.

--

--

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