Use an Effect to synchronize with something outside React. A value calculated from current props and state usually belongs in rendering instead. These React interview questions ask you to choose the owner of a calculation before reaching for useEffect.

Consider a product search. The products and search text already exist. Keeping a second state variable for the filtered list creates another value that must be kept consistent. It also makes the component harder to explain.

How should a filtered list be calculated?

import { useState } from 'react';

export default function ProductSearch({ products }) {
  const [query, setQuery] = useState('');
  const needle = query.trim().toLowerCase();
  const visible = products.filter(product =>
    product.name.toLowerCase().includes(needle));
  return <>
    <label>Search products
      <input value={query}
        onChange={event => setQuery(event.target.value)} />
    </label>
    <ul>{visible.map(product =>
      <li key={product.id}>{product.name}</li>)}</ul>
  </>;
}

This component assumes products have stable IDs and string names. Changing either the query or products gives the render everything needed to calculate visible. There is no extra synchronization step and no stale filtered state to reset.

When would an Effect be appropriate?

A connection, subscription or browser API can require setup after a component commits. For example, a chat view may connect to a room and disconnect when that room changes or the view disappears. The connection exists outside React's calculation of markup.

import { useEffect } from 'react';

export function RoomConnection({ roomId, connect }) {
  useEffect(() => {
    const connection = connect(roomId);
    return () => connection.disconnect();
  }, [roomId, connect]);
  return <p>Room: {roomId}</p>;
}

Here connect is an injected function with a documented contract: it returns an object with disconnect. A parent should provide a stable function when repeated reconnection is not intended. This fragment does not implement a network protocol.

Why do dependencies matter?

The Effect uses roomId and connect, so they are dependencies. Removing them to silence repeated execution can leave the component connected to an old room or using an old function. First ask why a dependency changes and whether that value should be defined elsewhere.

Adding an empty dependency array is not a general fix. It describes what the Effect reads; it is not a command meaning “please make this code correct once.” Follow the dependency lint rule and restructure the code when necessary.

What does cleanup guarantee?

React runs the previous cleanup before setting up an Effect again with changed dependencies, and on unmount. Development Strict Mode can also exercise setup and cleanup to reveal missing cleanup. The connection example should tolerate that cycle without leaving extra active subscriptions.

Cleanup does not undo every external operation automatically. A request might have reached a server already. When results can arrive out of order, use the data library's cancellation and stale-result handling or implement those rules deliberately.

Where should a purchase request go?

If the request happens because a user presses Buy, put that event-specific work in the event handler or the application action it calls. Merely displaying a page should not accidentally repeat a purchase. Rendering, external synchronization and deliberate actions answer different questions.

Practice the decision

  • Change the search and confirm no stored result list is necessary.
  • Change roomId and inspect disconnect followed by connect.
  • Unmount and check no active connection remains.
  • Ask whether expensive filtering is actually measured before adding memoization.

A strong answer names the external system, the setup, the cleanup and the dependencies. If there is no external system, first try a normal calculation during render.

References and next practice

react.dev — react effects

react question collection · Browse interview topics · Practise a question in Interview Challenge · How to Answer Technical Interview Questions Out Loud