React Page Lifecycle Summary

Here, the no bullshit summary of React Page Lifecycle

Start (Once)
object getDefaultProps      complex objects are shared not copied
object getInitialState
void componentWillMount
      both client and server
      can setState still, and render will happen only once.
ReactElement render
      examines this.props and this.state
      returns a single child (virtual DOM or react class)
      must be PURE (does not modify state or setTimeout)
void componentDidMount
      only on the client
      can access any refs, setTimeout, send AJAX requests

Repeat
      void componentWillReceiveProps( object nextProps )
            can setState to trigger render later
            don’t assume props has changed
      boolean shouldComponentUpdate
            return false if possible
      void componentWillUpdate( object nextProps, object nextState )
      render! => see above
      void componentDidUpdate( object prevProps, object prevState )

Finish (Once)
void componentWillUnmount
      cleanup: invalidating timers, clean up DOM elements

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top