A search box filters a list of items. Typing a new query should update the visible results. After the first render the filtered list never changes no matter what you type.
Type any letter into the search box — the list stays frozen at the full unfiltered set every time. The input updates but the results never react.
When does useMemo decide to recompute?
When does useMemo decide to recompute?
Why this fixes it
useMemo with an empty dependency array computed the filtered list once on mount and cached it permanently — because query was not listed as a dependency, React never knew to invalidate the memo, so the full unfiltered list was returned on every subsequent render regardless of what the user typed. Adding query to the dependency array tells React to recompute the memoized value whenever query changes. On each keystroke query updates, useMemo detects the dependency change, runs the filter function again with the fresh query, and the list reflects the current search term.