Tuomas Toivonen Tuomas Toivonen - 1 year ago 147
Javascript Question

What are typical use cases for React lifecycle methods like componentWillReceiveProps

componentWillReceiveProps and other lifecycle methods seems like deceptive temptation to bring unnecessary complexity and noise to the code in the hands of inexperienced React coder. Why do they exist? What are their most typical use cases? In the moment of uncertainty, how would I know if the answer lies in the lifecycle methods?

Answer Source

I have been using react for couple of months now, and most of my work is creating a large application from scratch. So the same questions have presented themselves in the start.

The following information is based on learning while development and going through multiple docs out there to get it right.

As asked in the question here are couple of uses cases for the lifecycle methods in react

  1. componentWillMount()

    • This is called once on the server side, if server side rendering is present, and once the client side.
    • I personally have used it just to do api calls which do not have direct effect on the components, for example getting oAuth tokens
  2. componentDidMount()

    • This function is mostly used for calling API's (here is why to call it in componentDidMount and not in componentWillMount)
    • Components state initialisations which are based on the props passed by parents.
  3. componentWillReceiveProps(nextProps,nextState)

    • This function is called every time props are received except the first render
    • Most common use I have encountered is to update the state of my current component which i can not do it in componentWillUpdate.
  4. shouldComponentUpdate(nextProps, nextState)

    • This method is invoked before the render happens when new props or states are received. Here we can return false if the re-render is not required.
    • I see this as a performance optimisation tool. In case of frequent re-rendering of parent component this method should be used to avoid unnecessary update to current component
  5. componentWillUpdate(nextProps,nextState)

    • this function is called every time a component is updated, it is not called when component mounts
    • Carry out any data processing here. For example, when a api fetch returns data, modelling the raw data into props to be passed to children
    • this.setState() is not allowed in this function , it is to be done in componentWillReceiveProps or componentDidUpdate
  6. componentDidUpdate(prevProps,prevState)

    • Invoked right after the changes are pushed to the DOM
    • I have used it whenever the required data is not at the first render (waiting for api call to come through) and DOM requires to be changed based on the data received
    • Example, based on the age received show the user if he is eligible for application for an event
  7. componentWillUnmount()

    • As the official docs mentions, any event listeners or timers used in the component to be cleaned here

In the moment of uncertainty, how would I know if the answer lies in the lifecycle methods?

What analogy i suggest

  1. Change is triggered in the component itself

    • Example, Enable editing of fields on click of an edit button
    • A function in the same component changes the state no involvement of lifecycle functions
  2. Change is triggered outside of the component

    • Example, api call finished , need to display the received data
    • Lifecycle methods for the win.

Here are some more scenarios -

  1. Does the change in state/props requires the DOM to be modified?

    • Example, if the current email is already present , give the input class an error class.
    • componentDidUpdate
  2. Does the change in state/props requires to data to be updated?

    • Example, parent container which formats data received after api call and passes the formatted data to children.
    • componentWillUpdate
  3. Props being passed to a child are changed , child needs to update

    • Example,
    • shouldComponentUpdate
  4. Adding an event listener

    • Example, add a listener to monitor the DOM, based on window size.
    • componentDidMount
    • 'componentWillMount' , to destroy the listner
  5. Call api

    • 'componentDidMount'

Sources -

  1. Docs - https://facebook.github.io/react/docs/component-specs.html
  2. this scotch.io article which cleared the lifecycle concepts
  3. Event Listener - https://facebook.github.io/react/tips/dom-event-listeners.html