Throughout a component’s lifecycle, as its props or state change, its DOM representation might change too. A component is a state machine; for a given input it will always return the same output.
React provides lifecycle hooks for a component to respond to various moments—its creation, lifetime, and teardown. We’ll cover them here, in the order of their appearance—first through instantiation, and then through the components life, and finally as the component is torn-down.
React components have a minimal lifecycle API, offering only what you need without being overwhelming. Let’s take a look at each method in the order they get called on your component.
InstantiationThe lifecycle methods that ...