React Hooks Interview Questions: Effects, State, Refs, and Cleanup

1. When do you need useEffect?

Use an Effect to synchronize with something outside React, such as a subscription or timer. React's documentation cautions that an Effect may be unnecessary if no external system is involved. Deriving a filtered list from existing props is different from opening a connection that must later be closed.

For our example, calculate a displayed full name from first and last name during rendering instead of creating extra state and an Effect to keep it synchronized. Extra state introduces another value that can become inconsistent. If an action should happen because a user clicked a button, consider whether it belongs in that event handler rather than an unrelated lifecycle reaction.

2. How do you avoid a stale value in a timer?

A callback captures values from the render that created it. If an interval repeatedly uses an old state value, the visible result may stop progressing as intended. For an update that depends on previous state, a functional updater expresses that dependency without reading the captured count.

This self-contained practice component increments a counter and clears the interval on cleanup. Explain both the updater and the cleanup. The example is an elapsed-tick display, not a precision stopwatch: delayed callbacks can make tick counts differ from actual wall-clock time. That limitation is a useful follow-up question.

import { useEffect, useState } from 'react';

export function TickCounter() {
  const [ticks, setTicks] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setTicks((value) => value + 1), 1000);
    return () => clearInterval(timer);
  }, []);
  return <output>{ticks}</output>;
}

3. Why can an Effect run an extra time in development?

With Strict Mode, React performs an additional development setup-and-cleanup cycle to expose synchronization bugs. Treat that as a reason to make cleanup mirror setup, not to remove safeguards until the duplicate behavior disappears. The user should not observe a broken subscription or multiple active timers after the cycle.

In the timer exercise, each setup creates an interval and each cleanup clears that exact interval. For a connection, cleanup should release the connection created by that setup. Test mounting, unmounting, and changing relevant inputs. A solution that only behaves correctly on the first mount is incomplete.

4. How is a ref different from state?

Use state for values whose changes should drive rendering. A ref can retain a mutable value across renders without making a ref update itself trigger a render. An element reference or an imperative handle has a different role from a count the user needs to see change on screen.

For an interview exercise, ask where to store a selected tab label and where to store a timeout handle. The label normally belongs in rendering state; the handle can be retained for cancellation. Explain the intended behavior rather than following a rule that every persistent value belongs in the same hook.

5. How can an older search response overwrite a newer one?

A user types a second query before the first request completes. If the first request resolves last and blindly updates state, stale results replace current ones. A robust design associates updates with the active request and prevents an obsolete response from changing the current view. Cancellation can save work where supported, but state correctness still needs deliberate handling.

Test this with controlled completion order: request A starts, request B starts, B resolves, then A resolves. The visible result must remain B. Also test a failure, an empty query, and unmounting. Do not verify only the easy case in which requests complete in the same order they were issued.

A hooks practice round without memorized answers

Build a small search panel with query state, derived empty-state messaging, and a clearly bounded asynchronous workflow. Explain every stored value and every Effect. Remove any Effect whose only purpose is copying one already available value into another. Then describe the cleanup and stale-response policy out loud.

Use Cluegent during preparation to ask follow-up questions, such as what happens under Strict Mode or after rapid query changes. Validate proposed fixes against actual behavior and React's documentation. Continue with the frontend practice guide below when you can explain the component's data flow without relying on generated code.

Where Cluegent helps

Cluegent supports permitted live workflows with transcript context, typed prompts, screenshot-aware answers, resume context, custom response behavior, quick action buttons, and a private desktop overlay. It is most useful when you already understand the subject and need help staying structured under pressure.

Frequently asked questions

Should I use an Effect to calculate every derived value?

No. If a value can be calculated from current props or state during rendering, extra state and an Effect often add unnecessary synchronization.

Does updating a ref trigger a render?

No. Use state for changes that should update the rendered interface; use refs for appropriate persistent mutable references.