How to Fix a React useEffect Search Filter That Won't Update

Why the filter never runs again

Here is the typical pattern:

const [query, setQuery] = useState('');
const [filtered, setFiltered] = useState<string[]>(ITEMS);

useEffect(() => {
  setFiltered(ITEMS.filter(i => i.toLowerCase().includes(query.toLowerCase())));
}, []); // runs once - query is '' on mount and never re-read

On mount query is '', so the effect runs, sees all items match, and sets filtered to the full list. After that, [] tells React this effect has no reactive dependencies - no value it watches can change - so it never re-runs. Typing updates query in state, which triggers a re-render, but the effect (and therefore filtered) never moves.

The fix: add the dependency

Include every piece of state or prop the effect reads inside the array:

useEffect(() => {
  setFiltered(ITEMS.filter(i => i.toLowerCase().includes(query.toLowerCase())));
}, [query]); // re-runs every time query changes

Now React sees that query is a dependency. When setQuery is called (on every keystroke), the state updates, the component re-renders, and React runs the effect again with the new query value - so filtered always reflects what the user typed.

Catch it at PR time with ESLint

The react-hooks/exhaustive-deps rule flags missing dependencies automatically:

{
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  }
}

A warning in the editor is the fastest way to catch this before it ships.

The better pattern: no effect needed

A filtered list derived from state doesn't need useEffect at all - compute it during render:

const [query, setQuery] = useState('');
const filtered = ITEMS.filter(i => i.toLowerCase().includes(query.toLowerCase()));

Every re-render recomputes filtered from the current query. No effect, no dependency array, no stale-closure risk. useEffect is for syncing with things outside React - network calls, DOM imperative APIs, subscriptions. Derived state from existing state is not a side effect; it's just a variable.

If the filter is expensive, wrap it in useMemo to recompute only when query or the list changes - still no effect:

const filtered = useMemo(
  () => ITEMS.filter(i => i.toLowerCase().includes(query.toLowerCase())),
  [query]
);