🪝 Introduction
Unlike class components, Hooks do not have their own lifecycle. Instead, they participate in the component lifecycle. Every Hook is executed whenever the component renders, while Hooks like useEffect allow you to perform actions after rendering or before a component is removed. This makes component behavior predictable and easier to organize.
Important
📅 Component Lifecycle with Hooks
The component is mounted for the first time. React executes all Hooks and renders the UI.
When state or props change, the component updates. React executes the Hooks again while preserving their stored values.
Before the component is removed, React runs cleanup functions returned by useEffect, then the component is unmounted.
⚙️ Hook Lifecycle Flow
🚀 Mount Phase
During the first render, React calls every Hook in the component. Hooks such as useState create their initial values, while useEffect schedules its effect to run after the component has been rendered.
Mount Example
import { useEffect } from "react";
function Welcome() {
useEffect(() => {
console.log("Component mounted");
}, []);
return <h1>Welcome!</h1>;
}The empty dependency array [] tells React to execute the effect only once after the initial render.
🔄 Update Phase
Whenever a component's state or props change, React renders the component again. During this render, every Hook executes in the same order, and React returns the previously stored state values.
Update Example
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}Each call to setCount() updates the stored state, causing React to render the component again with the latest value.
🧹 Unmount Phase
When a component is removed from the screen, React executes the cleanup function returned by useEffect. Cleanup is commonly used to remove event listeners, cancel timers, or unsubscribe from external services.
Cleanup Example
import { useEffect } from "react";
function Timer() {
useEffect(() => {
const id = setInterval(() => {
console.log("Running...");
}, 1000);
return () => {
clearInterval(id);
};
}, []);
return <h1>Timer</h1>;
}Tip
📊 Lifecycle Comparison
| Lifecycle Phase | What Happens | Common Hook |
|---|---|---|
| Mount | Component renders for the first time. | useState, useEffect |
| Update | Component re-renders after state or props change. | useState, useEffect |
| Unmount | Cleanup functions execute before removal. | useEffect cleanup |
🔍 How useEffect Behaves
Without a dependency array, the effect runs after every render.
With an empty dependency array [], the effect runs only once after the initial render.
When dependencies are provided, the effect runs after the initial render and whenever one of those dependency values changes.
✅ Best Practices
- Keep Hooks at the top level of your component.
- Use useEffect for side effects instead of during rendering.
- Return a cleanup function when working with subscriptions or timers.
- Specify dependencies accurately to avoid unnecessary executions.
- Keep each effect focused on a single responsibility.
📚 Official Resource
For more information about component rendering and Hook behavior, visit the official React documentation at React Documentation.