React Component Lifecycle

his is your very first post. Click the Edit link to modify or delete it, or start a new post. If you like, use this post to tell readers why you started this blog and what you plan to do with it.

Initialization


class MyComponent extends React.Component {

    getDefaultProps() {
        // Called:
        //   once and cached
        // Notes:
        //   shared across instances
    }

    getInitialState() {
        // Called:
        //   once right before the mounting phase
    }

    /* ... */
}

Mounting


class MyComponent extends React.Component {

    /* ... */

    constructor(props) {
        // The best place for:
        //   - initialize state based on props
        //   - bind methods
    }

    componentWillMount() {
        // Called:
        //   once and immediately before the initial rendering occurs
        // Notes:
        //   - calling this.setState() here will not a re-render
    }

    render() {
        // ...
    }

    componentDidMount() {
        // Called:
        //   once and immediately after React inserts the component into the DOM
        // The best place for:
        //   - load data from a remote endpoint
        //   - any functions with delayed execution like setTimeout or setInterval
        //   - initialization that requires DOM nodes
        //   - integration with other JavaScript frameworks
    }

    /* ... */

}

Updating

class MyComponent extends React.Component {

    /* ... */

    componentWillReceiveProps(nextProps) {
        // The best place for:
        //   - keep the state up-to-date to props
        // Notes:
        //   - calling this.setState() here will not trigger a re-render
    }

    shouldComponentUpdate(nextProps, nextState) {
        // The best place for:
        //   - tell React the update can be skipped
    }

    componentWillUpdate() {
        // Called:
        //   called immediately before rendering
        // The best place for:
        //   - perform preparation before an update occurs
        // Notes:
        //   - it is not allowed to use this.setState()
    }

    render() {
        // ...
    }

    componentDidUpdate() {
        // The best place for:
        //   - operate on the DOM when the component has been updated
        //   - do network requests as long as you compare
        //     the current props to previous props
    }

    /* ... */

}

Unmounting

class MyComponent extends React.Component {

    /* ... */

    componentWillUnmount() {
        // The best place for:
        //   - any necessary cleanup:
        //       invalidating timers
        //       canceling network requests
        //       cleaning up any DOM elements that were created in componentDidMount
    }
}
Advertisements

Author: wildeastengineer

Front-end developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s