component-lifecycle.md

Component Lifecycle

Note

This summary is focused on the Hook (function component) perspective.

Element Rendering

When a React component renders its React element, it means it injects the piece of data and/or UI it defines into to the DOM tree.

This is done by calling the function defining (returns) the element to be rendered (the function component itself, or the render() method of a class component).

Note

A rendering isn't necessarily expressed in a visual change on the screen, however, it is a render.

Mount and Unmount

When a React element is rendered, it is "mounted". When it is cleared from the DOM, it is "unmounted".

State Update -> Re-Render

When a component update its state, it re-renders its element with the new state values. An update in the component causes React to update the DOM accordingly (only what is necessary).

A React Component Lifecycle

• Begins after the component is mounted (render onto the DOM is complete).
• Ends just before the component will unmount (will be removed from the DOM).
• Optionally, could have in between some updates (re-renders).

Note

Again - for any of these "stations" - it won't necessarily cause an actual visual change on the screen.

See Also

• Component Lifecycle from a Class Component Perspective.
• Lifecycle Diagram.

---

Prev - React Components | Next - Special Props