The Component Lifecycle

Mounting (created/inserted into DOM)

These methods are called in the following order when an instance of a component is being created and inserted into the DOM (bold implies commonly used):

• constructor()
• static get­Derived­State­From­Props
• render() *
• ­React updates ­D­O­M and refs
• component­Did­Mount()

Updating (re-rendered)

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

• New props || setState() || force­Update()
  • render() *
    • static get­Derived­State­From­Props()
    • should­Component­Update()

           • render()

• get­Snapshot­Before­Update ("Pre-commit phase": Can read the DOM.)
• React updates ­D­O­M and refs**
• component­Did­Update()

Unmounting (removals from DOM)

This method is called when a component is being removed from the DOM:

• component­Will­Unmount**

* The Render Phase : Pure. Has no side effects. May be paused, aborted or restarted by React.

** The Commit Phase : Can work with DOM, run side effects, schedule updates.