1. Learn

Lifecycle Simulators

Deepen your understanding of component lifecycle by stepping through each method in slow-motion.

Component initialization

This simulator allows you to step through each lifecycle method as a component is initialized and mounted, and watch how this.state and this.props respond to various actions at each point in time.

How to use:

  • Press Instantiate to start the simulation.
  • Press Set this.state to run
    this.state = { next: 1 }.
  • Press Call setState to simulate a call to this.setState that increments this.state.next.
  • Press Change props to simulate a change to the component’s input props, e.g. from a call to a Redux store’s dispatch function.
  • Press Reset to start over.
constructor
  • Set initial state via this.state = { ... }.
  • Bind callbacks.
  • Do not subscribe to events, dispatch redux actions, or otherwise cause side effects.
componentWillMount
  • Similar to the constructor, but can cause side effects.
  • When possible, use constructor or componentDidMount instead.
  • Main use case is subscribing to events and dispatching actions in non-browser environments.
=
Update this.state
render
  • Do not call this.setState().
  • Do not cause side effects.
  • Just create an element and return it.
+
Add DOM Node
componentDidMount
  • Subscribe to events.
  • Dispatch actions.
  • Make any necessary calls to the DOM.
  • Not called in non-browser evironments, as there is no DOM to mount into.
Ready

Lifecycle Simulator

Not Intantiated

Props

undefined
After componentWillUpdate:null

State

undefined
After componentWillMount:null

State updates

This simulator shows how React will respond to a call to this.setState from an event handler, fetch response, etc.

Ready

shouldComponentUpdate
(nextProps, nextState)
  • If not specified, returns true by default.
  • Only use if necessary.
=
Update this.state
componentWillUpdate
(nextProps, nextState)
  • Do not call this.setState().
  • Do not cause side effects.
  • Clean up animations and event listeners.
=
Update this.state
render
  • Do not call this.setState().
  • Do not cause side effects.
  • Just create an element and return it.
componentDidUpdate
(prevProps, prevState)
  • Similar to componentDidMount.
  • Be careful, props may not have actually changed.
  • Dispatch actions.
  • Make any necessary calls to the DOM.
Ready

Lifecycle Simulator

Can Use DOM

Props

{"title":"bob"}
After componentWillUpdate:null

State

{"next":1}
After componentWillUpdate:null

Prop updates

This simulator shows the process that React uses to update the props on a component instance.

Ready

componentWillReceiveProps
(nextProps)
  • Update state in response to prop changes.
  • Be careful, props may not have actually changed.
  • Changes to props won't be handled until after render.
  • Side effects (such as fetching data) are better placed in componentDidUpdate.
shouldComponentUpdate
(nextProps, nextState)
  • If not specified, returns true by default.
  • Only use if necessary.
=
Update this.props
=
Update this.state
componentWillUpdate
(nextProps, nextState)
  • Do not call this.setState().
  • Do not cause side effects.
  • Clean up animations and event listeners.
=
Update this.props
=
Update this.state
render
  • Do not call this.setState().
  • Do not cause side effects.
  • Just create an element and return it.
componentDidUpdate
(prevProps, prevState)
  • Similar to componentDidMount.
  • Be careful, props may not have actually changed.
  • Dispatch actions.
  • Make any necessary calls to the DOM.
Ready

Lifecycle Simulator

Can Use DOM

Props

{"title":"bob"}
After componentWillUpdate:null

State

{"next":1}
After componentWillUpdate:null

Notes

State doesn’t change immediately

When you call this.setState(), React will not immediately update this.state. Instead, an update will be queued for some point in the future. This extra step appears as Update this.state in the simulator.

Note that in the constructor, you can directly assign to this.state, and so any changes will happen immediately.

Why avoid componentWillMount?

The componentWillMount method can accomplish many of the same tasks as constructor and componentDidMount. You can call this.setState() to change state, and can also cause side effects that change the input props. So why avoid componentWillMount?

If you cause a change in props in componentDidMount, it is obvious that the component will need to re-render. However, if you cause a change in props within componentWillMount, React’s behavior is far from obvious.

When a component’s props change within componentWillMount, the following call to render will still use the old props.

The componentWillMount method can accomplish many of the same tasks as constructor and componentDidMount. However, unless you’re using server-side rendering, it cannot accomplish any more than other lifecycle methods. Avoiding it makes it easier to reason about your components.

More details

These simulators are a lot of fun, but they may leave you with more questions than you started with. Why should side effects be limited to componentDidMount and componentDidUpdate? Why should shouldComponentUpdate be avoided?

I’ll be answering these questions (and more) in two upcoming pieces, and React Armory members get early access. Join below to make sure you don’t miss out – and you’ll also get immediate access to a bunch of printable React and JavaScript cheatsheets!

Join React Armory,
Get Cool Stuff

Exclusive access to resources.

Early access to new content.

No spam, ever.

React Armory is growing. Join in to be the first to experience new lessons, examples and resources.