A search box filters a list of items, showing only those that match the current query.
Type any character into the search box - the list does not update. All six items remain visible regardless of what you type. The input field updates correctly but the results list is permanently frozen at the initial unfiltered state.
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.