Stop 08 · ReactTopics · 5/20

Lifecycle

In short

Every component appears, changes and eventually disappears. Knowing these moments tells you when to fetch data, when to start a timer and, just as important, when to clean up.

The stages a component goes through — mounting, updating, unmounting — and the hooks (`useEffect`) that let you run code at each stage in function components.

The jaadu mascot leaves a hostel room with a suitcase and switches off the fan and light.

Think of it like this

Hostel check-in to check-out

You check in (mount), live there while your stuff keeps changing (update), and finally check out (unmount). Leave the fan running after checkout and the warden is not happy. Components must switch off their timers and listeners the same way.

Watch it happen

The Clock's life, start to finish

Render

Paint

Effect

Re-render

Cleanup

1/5Clock renders for the first time and returns a <p> with the current time.

The big ideas

What you need to know

Mount

The component shows up on screen for the first time. This is when you usually start fetching or subscribing.

Update

It re-renders because its props or state changed. Effects re-run only if their dependencies changed.

Unmount

It's removed from the screen. Anything you started, like intervals or listeners, must be stopped.

useEffect covers all three

Function components use useEffect for side work. The function it returns is the cleanup.

See it in code

Walk through the code

tsx

1import { useEffect, useState } from "react";2 3export default function Clock() {4  const [time, setTime] = useState(() => new Date());5 6  useEffect(() => {7    const id = setInterval(() => setTime(new Date()), 1000);8    return () => clearInterval(id); // cleanup on unmount9  }, []); // [] = run once after mount10 11  return <p>{time.toLocaleTimeString("en-IN")}</p>;12}

1/4Lazy initial state: new Date() runs only on the first render.

Without the cleanup, every time Clock mounts a new interval starts, and the old ones keep running in the background.

Save yourself the pain

Common mistakes

Oops

Starting an interval or event listener in useEffect and never returning a cleanup.

Do this instead

Return a function that clears it. Otherwise it keeps running after the component is gone.

Oops

Panicking because effects run twice in development.

Do this instead

React's Strict Mode mounts, unmounts and remounts once in development to catch missing cleanups. Production runs it once.

Your mission

Catch a leak

~15 min

Quick check

When does the function returned from useEffect run?

Go deeper

1Log messages in `useEffect` with different dependency arrays to see mount/update/unmount behavior.
2Compare lifecycle methods in class components to `useEffect` in function components.
3Learn the cleanup function returned from `useEffect` and when it runs.