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 filters once on the first render and ignores every keystroke after that.
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. 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. Custom hooks participate in React's dependency tracking the same way component-level effects do.