easyFrontend

How do you handle side effects in functional components?

Q: How do you handle side effects in functional components?

**Core concept (TL;DR).** Keep rendering pure and put side effects where they belong: **user-driven** effects (a click that saves data) go in **event handlers**; effects that **synchronize with an external system** (subscriptions, fetching for the current props, manual DOM) go in useEffect . Anything you can **derive during render**, derive — don't store it in state via an effect. Right home for each kind of work <text x="96" y="64" fill="#22c55e" font-size="10" font-weight="700" text-a

970 views

Understand the problem

Discuss the primary hook used for managing side effects and its capabilities.

hooksuseeffectside effectsdata fetching

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

Derive in render; effect only for sync

import { useState, useEffect } from "react";

export default function App() {
  const [first, setFirst] = useState("Ada");
  const [last, setLast] = useState("Lovelace");
  const fullName = first + " " + last;        // ✅ derived, not state-in-effect

  useEffect(() => {
    document.title = fullName;                 // ✅ sync with an external system
  }, [fullName]);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <input value={first} onChange={(e) => setFirst(e.target.value)} />
      <input value={last} onChange={(e) => setLast(e.target.value)} />
      <p>{fullName} (also the tab title)</p>
    </div>
  );
}

Join the discussion

Discussion (0)

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

What is `PropTypes` and when would you use it?

What is the role of `react-dom`?