Worked solutions 04 · State ownership

A. Trace a search

The input reports currentTarget.value; the handler requests a query update; the next render receives the new query; normalization and filterEvents derive the result list; the count reads its length. The field retains the raw typed string while searching uses trimmed, case-normalized text. The supplied Clear search calls the query callback with an empty string without changing category. Your separate Reset filters action should call setQuery(’‘) and setCategory(’all’) in the same handler. Both buttons should use type=“button” if within a form, and their labels should make their different scopes clear.

B. Repair queued updates

The original handler schedules one as the next value three times because all expressions read the same snapshot of zero. Three calls to setCount(previous => previous + 1) produce three. The variable count still belongs to the current render even after a setter is called, so an immediate log reads that snapshot. Observe the next render to inspect the updated value. Do not add a timeout as a conceptual repair.

C. Transfer

Store a boolean such as onlyAvailable, initialized false. The checkbox reads checked={onlyAvailable} and reports event.currentTarget.checked. Derive the list using the existing query/category filter plus !onlyAvailable || event.places > 0. Keep the count derived from that final list. Place the boolean beside the other filters in their common owner because both controls and results need it. Test empty search/all categories with the checkbox off, checkbox alone, query alone, category alone, and a combination yielding no matches. No effect is needed.