A custom hook filters a list based on a query passed in as an argument. Changing the query from the parent updates the filtered results.
Type in the search box — the filtered list never changes after mount. The hook only runs the filter once on first render.
The hook receives query as an argument — does it respond when that argument changes?
The hook receives query as an argument — does it respond when that argument changes?
Why this fixes it
`useFilter` closed over `query` at the time the effect was created — with an empty dependency array, the effect ran once on mount with the initial empty string and was never recreated, so every subsequent call to `useFilter` with a new `query` value was silently ignored by the effect inside it. Adding `query` to the dependency array inside the custom hook tells React to re-run the effect whenever the argument passed into the hook changes, giving the filter logic a fresh closure on each update. The fix works because custom hooks are plain functions that participate in React's dependency tracking the same way component-level effects do — the hook boundary does not insulate the effect from needing its dependencies declared.