A search box filters a list. Typing a new query should update the results. After the first keystroke the results never change again
Type one character — the list filters correctly. Type a second character — the list does not update. The results are frozen after the first change.
The effect runs — but ask yourself when it runs.
The effect runs — but ask yourself when it runs.
Why this fixes it
The effect closed over query at the time it was first created — with an empty dependency array, React never re-ran it, so the filter logic permanently operated on the empty string captured at mount. Adding query to the dependency array tells React to re-execute the effect whenever query changes, so the closure always captures the current search string. Each keystroke triggers a fresh filter pass and setResults updates the list accordingly.