search: Avoid completely rerendering the sidebar on every keypress
Created by: fkling
We are currently rerendering the sidebar on every keypress in the search query input (this is working off #24844 to demonstrate that the sidebar doesn't rerender because the whole page rerenders):
https://user-images.githubusercontent.com/179026/133458212-2210c6f8-308c-4cbc-b9f8-cc36045bcd78.mp4
This is mainly due to how we render the various links/buttons: They all either directly use the current query or depend on an event handler that uses the current query (and thus gets updated every time the query changes).
A simple solution would be to use useRef
with the query so that the event handler doesn't have to be recreated. But I would like to explore one of these solutions:
- Add a mini redux-like actions system to mutate the query. That means instead of manipulating the query directly, create mutation "actions" (update filter, add filter, toggle filter, etc) that is passed to the query store. This is certainly a more drastic approach but decouples everything from the current query.
- Use an immutable "
updateQuery
", which accepts a callback which gets passed the current query, in/as handlers so that they don't have to be recreated every time the query changes. Kind of likeuseState
accepts a callback to pass in the current state.