ponentWillReceiveProps and other lifecycle methods seems like deceptive temptation to bring unnecessary plexity 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?

ponentWillReceiveProps and other lifecycle methods seems like deceptive temptation to bring unnecessary plexity 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?

• javascript
• user-interface
• reactjs
• web

3 Answers 3

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. ponentWillMount()

   • 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 ponents, for example getting oAuth tokens

2. ponentDidMount()

   • This function is mostly used for calling API's (here is why to call it in ponentDidMount and not in ponentWillMount)
   • Components state initialisations which are based on the props passed by parents.

3. ponentWillReceiveProps(nextProps,nextState)

   • This function is called every time props are received except the first render
   • Most mon use I have encountered is to update the state of my current ponent which i can not do it in ponentWillUpdate.

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 ponent this method should be used to avoid unnecessary update to current ponent

5. ponentWillUpdate(nextProps,nextState)

   • this function is called every time a ponent is updated, it is not called when ponent 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 ponentWillReceiveProps or ponentDidUpdate

6. ponentDidUpdate(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 e 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. ponentWillUnmount()

   • As the official docs mentions, any event listeners or timers used in the ponent 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 ponent itself

   • Example, Enable editing of fields on click of an edit button
   • A function in the same ponent changes the state no involvement of lifecycle functions

2. Change is triggered outside of the ponent

   • 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.
   • ponentDidUpdate

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.
   • ponentWillUpdate

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.
   • ponentDidMount
   • 'ponentWillMount' , to destroy the listner

5. Call api

   • 'ponentDidMount'

Sources -

1. Docs - https://facebook.github.io/react/docs/ponent-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

Some typical use cases for the most monly used lifecycle methods:

ponentWillMount: Invoked before initial rendering. Useful for making AJAX calls. For instance, if you need to grab the user information to populate the view, this is a good place to do it. If you do have an AJAX call, it would be good to render an indeterminate loading bar until the AJAX call finishes. I've also used ponentWillMount to call setInterval and to disable Chrome's drag and drop functionality before the page renders.

ponentDidMount: Invoked immediately after the ponent renders. Useful if you need to have access to a DOM element. For instance I've used it to disable copy and pasting into a password input field. Great for debugging if you need want to know the state of the ponent.

ponentWillReceiveProps: Invoked when ponent receives new props. Useful for setting the state with the new props without re-rendering.

ponentWillReceiveProps is part of Update lifce cycle methods and is called before rendering begins. The most obvious example is when new props are passed to a Component. For example, we have a Form Component and a Person Component. The Form Component has a single that allows the user to change the name by typing into the input. The input is bound to the onChange event and sets the state on the Form. The state value is then passed to the Person ponent as a prop.

import React from 'react';
import Person from './Person';

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state        = { name: '' } ;
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.currentTarget.value });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <Person name={ this.state.name } />
      </div>
    );
  }
}

Any time the user types into the this begins an Update for the Person ponent. The first method called on the Component is ponentWillReceiveProps(nextProps) passing in the new prop value. This allows us to pare the ining props against our current props and make logical decisions based on the value. We can get our current props by calling this.props and the new value is the nextProps argument passed to the method.