React Component lifecycle (when and how to use react component lifecycle methods)

Preliminary words about setting state

Before I touch on the life of a react component, I want quickly mention that setting component state is one of the few ways of holding, processing and using information that is internal to a given component, which allows you to use the component's internal logic.

The life of a React Component

The life of a React component begins with pre-mounting (the componentWillMount() method) and ends in its un-mounting (the componentWIllUnmount() method). The cycle of a React component is as follows, which you could almost divide into the three major areas (mounting, updating and un-mounting). The reason why these sophisticated mounting methods are used is that they allow React to render beautifully advanced dynamic webpages such as a single-page ticking clock app, which requires much control in the source code:

  1. componentWillMount() - mounting/loading data to be updated(stage 1)
  2. componentDidMount() - mounting/loading data to be updated (stage 1)
  3. componentWillReceiveProps() - stage between mounting and updating/loading (between stage 1 and stage 2).
  4. shouldComponentUpdate() - updating the component (stage 2)
  5. componentWillUpdate() - updating the component (stage 2)
  6. componentDidUpdate() - updating the component (stage 2)
  7. componentWillUnmount() - un-mounting the component (stage 3)

In an ideal world, we wouldn’t want to use all of these lifecycle methods. However as I mentioned before, with more complicated code and more sophisticated functionality, they allow more control over code architecture and how user processes flow from the user interaction. Trying to implement a ticking clock single-page app, for instance, would have many rendering issues if the React components were only controlled through passing down and side-to-side state and props (short for properties).

The seven lifecycle methods above (split into three stages with one intermittent stage inbetween 1 and 2) allow you to exact a little more control over how and when you would like your component to update.

Therefore, the above seven lifecycle methods should be used sparingly and with care. The lifecycle methods also allow other programmers or users of code to quickly flow through its architecture. For example, starting from the ReactDom.render() methods, to the constructor(props) method to the componentWIllMount() method to the render() method.

So in a bit more detail below are the pros and cons of the React's seven major lifecycle methods. There are some others such as getInitialState() which I have left out as they are not used as much as the major seven described below. Note: some of the lifecycle methods accept no parameters, some take two and some take one. This refers to the fact that the lifecycle methods depend on what happens during the previous lifecycle method.

1. componentWillMount() - stage 1 (mounting/loading data to be updated)

  • This is essentially the React setup method (optional stage 1) as there are other important setup methods, which we could use such as constructor() (where we could setup the initial state).

  • The purpose of componentWillMount() is to prepare the React component before stage 2 (the updating stage) .

  • Some people feel that this lifecycle method is not very useful since the configuration, which would normally happen within it, should be done at the highest level component of your app (the root component) beforehand.

  • The most common use case of this component is for app configuration with more complex applications.

2. componentDidMount() - stage 1 (mounting/loading data to be updated)

  • This lifecycle method signifies that the your React component has been mounted and is ready to be used. This last mounting stage is where you can load your data for stage 2 (the updating stage).

  • The componentDidMount() method is also where you do a lot of interesting things with your component before updating it as you have now successfully mounted it. These interesting things include:

  • drawing on a <canvas> JSX element that you have just rendered.

  • adding event listeners to your React component

  • initializing a masonry grid layout from a collection of JSX elements.

  • The ComponentDidMount() method is the ideal place to do all the setup you want before the update (stage 2) stage, as well as loading all the data you need.

  • You are also able within this lifecycle method to start AJAX calls to load in data for your React component as well as being able to call setState so this lifecycle mounting stage gives you more flexibility than the previous one (componentWillMount()).

3. componentWillReceiveProps(nextProps) - the stage between 1 and 2 (between mounting and updating)

  • Picture this scenario: a stream of new props (short for React properties - any information we want to pass between components that we cannot change within individual components) ) arrive at your destination React component (as data was loaded in by a parent component’s componentDidMount().

  • Before our child component updates these new properties (or props for short) during the update stage that follows the mounting stage, componentWillReceiveProps() is called to signify properties are being passed from parent to child or sibling to sibling.

  • Because of this componentWIllReceiveProps(nextProps) always takes one argument. The real question is if it is used at all since properties may not even be passed down from parent to child (inheritance) or sibling to sibling (composition).

  • Essentially componentWillReceiveProps(nextProps) gives the following update stage access to the props from the mounting stage (or loading stage).

  • This lifecycle method also decided which properties are to be updated during stage 2(the update stage).

4. shouldComponentUpdate(nextProps, nextState) - stage 2 (updating the component)

  • This lifecycle method is a permission method. What this means is that it returns either a true and false value (it returns a boolean. The question the user asks this method 'should i update the component given the fact that I have received a new props or state or both).
  • As you can it is an optional lifecycle method since the child component (inheritance) or sibling component (composition) may never receive properties or a new state from the parent or sibling.

5. componentWillUpdate() - stage 2 (updating the component)

  • The componentWillUpdate() lifecycle method sets up the updating process. Updating any props or state that passed to the component.

6. componentDidUpdate - stage 2 (updating the component)

  • The componentDidUpdate() lifecycle method loads the updating process to the component. It a very important lifecycle method as it implements any changes which need to take place.

7. componentWillUnmount - stage 3 (unmounting or unloading data from the component)

  • Before your component disappears it asks if you have any last minute requests.
  • This is where the componentWilUnmount() lifecycle method comes into play.
  • Within the body of this method you can also cancel any outgoing network requests, or remove all event listeners associated with the component.

Summary

So, in summation, these lifecycle methods explain how React component architecture allows ease of module design. Not only that it facilitates small reusable files of code that can be used over and again and understood by React developers across the globe.

results matching ""

    No results matching ""