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. The bug lives inside the hook's internals — not in the component that calls it — which is what makes this Black Belt: you have to reason about the hook's closure independently from the component's render cycle.
Type in the search box — the filtered list never changes after mount. The hook only runs the filter once on first render.
The custom hook's internal useEffect has an empty dependency array. It only runs on mount and never re-runs when the query prop changes.
The custom hook's internal useEffect has an empty dependency array. It only runs on mount and never re-runs when the query prop changes.