[React] React Fundamentals: Component Lifecycle

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that.

Updating: componentWillReceiveProps

componentWillReceiveProps(object nextProps)

Invoked when a component is receiving new props. This method is not called for the initial render.

Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Callingthis.setState() within this function will not trigger an additional render.

Updating: shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.

Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.

If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change. (In addition, componentWillUpdate and componentDidUpdate will not be called.)

By default, shouldComponentUpdate always returns true to prevent subtle bugs when stateis mutated in place, but if you are careful to always treat state as immutable and to read only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

If performance is a bottleneck, especially with dozens or hundreds of components, useshouldComponentUpdate to speed up your app.

Updating: componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Lesson 11: Component Lifecycle: Updating</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
    <style>
        body {
            margin: 25px;
        }
    </style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
    /** @jsx React.DOM */
    var APP =
            React.createClass({
                getInitialState:function(){
                    return {increasing:false}
                },
                update:function(){
                    var newVal = this.props.val+1
                    this.setProps({val:newVal})
                },
                componentWillReceiveProps:function(nextProps){
                    //Invoked when a component is receiving new props. This method is not called for the initial render.
                    //So when the counter increase, this method will be called
                    //works for props, not state
                    this.setState({increasing:nextProps.val>this.props.val})
                },
                shouldComponentUpdate: function( nextProps,  nextState){
                    /*Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.

                     Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.*/
                    console.log(nextProps.val);
                    //Only update every 5 times
                    return nextProps.val % 5 ===0;
                },
                render:function(){
                    console.log(this.state.increasing)
                    return  (
                            <button
                                    onClick={this.update}>
                                    {this.props.val}
                            </button>
                    )
                },
                componentDidUpdate: function( prevProps,  prevState){
                    console.log("prevProps ===" + JSON.stringify(prevProps));
                }
            });


    React.renderComponent(
            <APP val={0} />,
            document.getElementById('panel'))

</script>
</body>
</html>