mediumFrontend

Explain the purpose of `useEffect`.

Q: Explain the purpose of `useEffect`.

**Core concept (TL;DR).** useEffect lets a component run **side effects** — work outside rendering, like data fetching, subscriptions, timers, or manual DOM changes. It runs **after** React commits to the screen; its **dependency array** controls when it re-runs; and the function it returns is a **cleanup** that undoes the previous effect. Effects run after render/paint, not during render <text x="80" y="84"

364 views

Understand the problem

A deep dive into one of the most critical and often misunderstood React Hooks.

useEffectside effectslifecyclehooks

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Effect with cleanup (subscription)

import { useState, useEffect } from "react";

export default function App() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize); // subscribe
    return () => window.removeEventListener("resize", onResize); // cleanup
  }, []); // [] → subscribe once, clean up on unmount

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      Window width: <strong>{width}px</strong> — try resizing.
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are Higher-Order Components (HOCs) in React?

What are Error Boundaries in React?