You might not need an effect
Most useEffect calls in real code should not exist. Derive data during render, reset state with a key, handle events in event handlers, avoid chains of effects, and fetch data with a framework or library.
Comes up in: React
Learn#
Kabir’s profile page flickers an empty name on load, and the React Profiler shows two renders for every prop change. He uses an effect to copy first + " " + last into state.
Derived state is anything you can calculate from props or state. Calculate it during render instead of storing it:
import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register(); // a DOM for Node; in a browser you already have one
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
const { createElement: h, useEffect, useState, act } = await import("react");
const { createRoot } = await import("react-dom/client");
let renders = 0;
function WithEffect({ first, last }) {
const [fullName, setFullName] = useState("");
useEffect(() => { setFullName(`${first} ${last}`); }, [first, last]); // derived state via an effect
renders++;
return h("p", null, fullName);
}
function Derived({ first, last }) {
const fullName = `${first} ${last}`; // calculated during render
renders++;
return h("p", null, fullName);
}
for (const C of [WithEffect, Derived]) {
renders = 0;
const box = document.createElement("div");
const root = createRoot(box);
await act(() => root.render(h(C, { first: "Asha", last: "Rao" })));
console.log(C.name, "→ renders:", renders, "| text:", JSON.stringify(box.textContent));
}Output (verified)
WithEffect → renders: 2 | text: "Asha Rao" Derived → renders: 1 | text: "Asha Rao"
The test for every effect: why does this code run? If it is because the user did something, such as a click or a submit, it belongs in that event handler. Only code that runs because the component is on screen, syncing with something outside React, belongs in an effect.
Page
- <p></p>
State
- renders: 1
First render: fullName state is "". React commits an empty paragraph.
Read the steps as text
- First render: fullName state is "". React commits an empty paragraph.
- After paint, the effect calls setFullName("Asha Rao"), which schedules a second render.
- The second render commits the name. For one frame, the screen could show the empty value.
- Calculated during render instead: one render, correct from the first frame, and no state to keep in sync.
Predict#
Predict first
A product page has a 'Buy' button. An effect watches a 'purchased' state and sends the order request when it turns true. What is wrong?
Sending the order is caused by a user event. In an effect, it can fire again on remount, in StrictMode, or after a state restore, and it runs a render later than needed. Put it in the handler.
Interview angle#
Say it like this — about 30 seconds
“Effects are for synchronizing with external systems. Many effects in real code should not exist. Data derived from props or state should be calculated during render, with useMemo if it is expensive. To reset state when a prop like an id changes, I change the component’s key. Logic caused by a user action goes in the event handler. I avoid chains of effects that set state to trigger other effects, and I fetch data with a framework or a library such as TanStack Query instead of raw effects.”
Follow-up How do you reset a form when the selected user changes?
key={userId}; React mounts a fresh instance with fresh state.Follow-up What is an effect chain?
Follow-up When do you still need an effect?
Practice#
Guided
Encode the decision: render, key, handler or effect.
Done when
- Derived values go to “render” and resets on an id change go to “key”.
- Work caused by a user event goes to “handler”, and so do effect chains.
- Only syncing with an external system stays an “effect”.
Remember#
Try to answer each card before you open it. Then add them to your reviews.
Where should derived data be computed?
During render (with useMemo if expensive).
How do you reset all state when a prop like userId changes?
Pass it as the key.
Where does code caused by a click belong?
In the click handler, not an effect.
What one question decides between an effect and a handler?
Why does this code run: a user action, or because the component is on screen?
Go deeper
Four layers. Stop at the one your interview needs; each ends with a quick check.
The core ideaEvery round
Filtering a list or formatting a name during render is cheap; for slow work, wrap it in useMemo (RCT.03.04). Do not store it in state.
Check yourself: How do you avoid recomputing an expensive filter on every render?
useMemo with the inputs as dependencies.
How it works underneathSenior rounds
Check yourself: Why does changing key reset state?
A new key is a new identity, so React mounts a fresh component.
Edge cases and trapsWhere people slip
onChange there, not in an effect.Check yourself: What is wrong with effects that set state to trigger other effects?
Each step is another render, and the logic is spread across effects.
In productionStaff-level answers
Check yourself: Why prefer a data library over fetching in effects?
It handles caching, de-duplication, race conditions and refetching.
Finished the five steps? Mark it, and its cards join your reviews.
Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.