ReactJS Component Lifecycle Updating

ReactJS Component Lifecycle Updating

ReactJS mounting have 4 methods:
- componentWillReceiveProps(object nextProps): is invoked when a mounted component receives new props. This method should be used to compare this.props and nextProps to perform state transitions using this.setState().
- shouldComponentUpdate(object nextProps, object nextState): boolean: is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare this.props with nextProps and this.state with nextState and return false if React should skip updating.
- componentWillUpdate(object nextProps, object nextState): is invoked immediately before updating occurs. You cannot call this.setState() here.
- componentDidUpdate(object prevProps, object prevState): is invoked immediately after updating occurs.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="http://fb.me/react-0.12.2.js"></script>
  <script type="text/javascript" src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
  <script type="text/jsx">
    var Button = React.createClass({
      getInitialState: function() {
        return {increasing: false}
      },
      handleUpdate: function() {
        this.setProps({val: this.props.val+1});
      },
      componentWillReceiveProps: function(nextProps) {
        this.setState({increasing: nextProps.val > this.props.val});
      },
      shouldComponentUpdate: function(nextProps, nextState) {
        return nextProps.val % 5 === 0;
      },
      render: function() {
        console.log(this.state.increasing);
        return(
          <div>
            <button onClick={this.handleUpdate}>{this.props.val}</button>
          </div>
        );
      },
      componentDidUpdate: function(prevProps, prevState) {
        console.log('prevProps', prevProps);
      }
    });

    ReactDOM.render(<Button val={0} />, document.body);
  </script>
</body>
</html>

So far go good, That’s it!!! See ya!!! :)