React: What is the lifecycle of a functional component?

Lifecycle is the stages a component goes through from creation to removal.

Simple analogy: Imagine the component is a plant in a pot.

1. Mounting (planting) — you planted a seed in a pot, watered it, put it on the windowsill.
2. Updating (growth) — the plant grows, new leaves appear (data updates).
3. Unmounting (removal) — the plant withered, you threw away the pot.

In functional components (with hooks) the lifecycle is managed through useEffect:

1. Mounting — component appeared (useEffect with []):

1useEffect(() => {
2    // Executes ONCE after the first render
3    fetchData();
4}, []);  // Empty array = only on mount

2. Updating — component updated (useEffect with [dependencies]):

1useEffect(() => {
2    // Executes on every change of count
3    console.log('count changed:', count);
4}, [count]);  // Array with dependencies

3. Unmounting — component is removed (return in useEffect):

1useEffect(() => {
2    const timer = setInterval(() => console.log('tick'), 1000);
3    
4    return () => {
5        clearInterval(timer);  // Cleanup on component removal!
6    };
7}, []);

Complete lifecycle example:

1function UserProfile({ userId }) {
2  const [user, setUser] = useState(null);
3  const [status, setStatus] = useState("loading");
4
5  // MOUNTING: runs once when component appears
6  useEffect(() => {
7    console.log("Component mounted");
8    return () => console.log("Component will unmount");
9  }, []);
10
11  // UPDATING: runs when userId changes
12  useEffect(() => {
13    let cancelled = false;
14    setStatus("loading");
15    fetch(`/api/users/${userId}`)
16      .then(res => res.json())
17      .then(data => {
18        if (!cancelled) {
19          setUser(data);
20          setStatus("loaded");
21        }
22      });
23    return () => { cancelled = true; }; // Cleanup
24  }, [userId]);
25
26  if (status === "loading") return <Spinner />;
27  return <h1>{user.name}</h1>;
28}

How it works step by step:

1. Component function runs → JSX is evaluated → Virtual DOM is created.
2. React commits Virtual DOM to real DOM (user sees the UI).
3. useLayoutEffect runs (synchronous, before browser paints).
4. useEffect runs (asynchronous, after browser paints).
5. On state/prop change → steps 1-4 repeat.
6. On unmount → all cleanup functions from useEffect run.

Performance considerations:

• Multiple useEffect hooks run in declaration order — React does not batch them.
• Cleanup functions run before the next effect, not on unmount only.
• Avoid expensive computations inside useEffect — use useMemo instead for derived data.

Important:

• useEffect(() => {}, []) — replacement for componentDidMount (once on load).
• useEffect(() => {}, [dep]) — replacement for componentDidUpdate (when dep changes).
• return () => {} inside useEffect — replacement for componentWillUnmount (cleanup).
• Without array: useEffect(() => {}) — executes after EVERY render (rarely what you want).
• useLayoutEffect — same thing, but executes BEFORE the browser shows the updated DOM.