React Component Lifecycle Methods from v16.3 with example
Tags: react, lifecycle
Published: 2021-03-31 14:18:38

React Component Lifecycle Methods from v16.3 with example

https://grokonez.com/frontend/react/react-component-lifecycle-methods-from-v16-3-react-lifecycle-example

From v16.3, React introduces new 2 lifecycles <code>getDerivedStateFromProps</code>, <code>getSnapshotBeforeUpdate</code>, and also notices that 3 methods will be in time considered deprecation <code>componentWillMount</code>, <code>componentWillUpdate</code>, <code>componentWillReceiveProps</code>. In this tutorial, we're gonna look at new React Component Lifecycle Methods, then we will build an example that uses them.

<!--more-->
<h2>Component Lifecycle</h2>
<img src="https://grokonez.com/wp-content/uploads/2018/04/react-component-lifecycle-methods-diagram.png" alt="react-component-lifecycle-methods-diagram" width="714" height="458" class="alignnone size-full wp-image-11491" />
<h3>Mounting methods</h3>
<h4>constructor()</h4>
This method will be called whenever a new object is created. <code>super(props)</code> calls the constructor of parent class (<code>React.Component</code>) to initialize itself. Now we have access to <code>this.props</code>.

<code>constructor()</code> is used for setting up Component such as creating class fields or initialize <code>state</code> by directly overwriting the <code>this.state</code>. Don’t call <code>this.setState()</code> here.

It is also often used to bind functions that will be passed as callbacks.
<pre><code class="language-javascript">
constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.minus = this.minus.bind(this);

    this.state = {
        counter: 0,
        anotherCounter: props.initialCounter		
    }
}</code></pre>
Don't make any side effects (AJAX call for example) or subscription in the constructor. Use <code>componentDidMount()</code> instead.
<h4>static getDerivedStateFromProps()</h4>
This method is invoked after a Component is instantiated as well as when it receives new props. 

Static method doesn't exist on instance, but the class. So it does not have access to <code>this</code> keyword. It helps us NOT call <code>this.setState()</code> here, instead we should return an object to update state, or <code>null</code> if no update is needed (only need to return the part of state that changes, other will be preserved).

<strong>*Note:</strong>
- If parent Component causes this Component to re-render, this method will be called even if <code>props</code> have not changed => compare new and previous values if we want to handle changes.

- Calling <code>this.setState()</code> doesn’t trigger <code>getDerivedStateFromProps()</code>.
<pre><code class="language-javascript">
static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.counter > nextProps.maxCount) {
        console.log('set counter to [' + nextProps.maxCount + ']');
        return {
            counter: nextProps.maxCount
        };
    }

    console.log('check MAX counter >> no need to change counter!');
    return null;
}
</code></pre>
<h4>render()</h4>
This method is <strong>required</strong>.

When <code>render()</code> is called, it analyses <code>this.props</code> and <code>this.state</code> and return React elements (native DOM Component or a user-defined composite Component), String or number, Portal, null or Boolean (render nothing).

<code>render()</code> should not modify component state or directly interact with the browser. If you need to interact with the browser, use <code>componentDidMount()</code> or the other lifecycle methods instead.

<strong>*Note:</strong>: <code>render()</code> will not be invoked if <code>shouldComponentUpdate()</code> returns false.
<pre><code class="language-html">render() {
    return (
        &lt;div&gt;
            &lt;h1&gt;Java Sample Approach&lt;/h1&gt;
            &lt;h3&gt;{this.props.maxCount}&lt;/h3&gt;
            &lt;p&gt;Counter: {this.state.counter}&lt;/p&gt;
            &lt;button onClick={this.add}&gt;ADD+&lt;/button&gt;
			&lt;CalculatorComponent /&gt;
        &lt;/div&gt;
    );
}</code></pre>


React Component Lifecycle Methods from v16.3 with example

https://grokonez.com/frontend/react/react-component-lifecycle-methods-from-v16-3-react-lifecycle-example