I see that react 18 has some cool hooks to help manually control the priority of state updates (useDeferredValue and useTransition) and using these methods fixes some performance issues that I have on a table. But React 18 isn't stable yet!
So I am wondering if there is a way to handle this is React 16 / 17? Is there a way to tell the reconciler to tag my row updates as low priority so that a user's typing updates will always interrupt and take precedence over the table rendering the rows?
For a tiny bit more context, my issue is that I have a search box and a table on a page. The initial data displayed in the table rows is unfiltered, but when the user types in the search box, I make a query to the backend and get a filtered list of data. When that data comes back, I render it into the table. I can (and do) use a debounce on the query so that only if the user stops typing for 500ms do I fetch data. But this only helps when the user is typing faster than 500ms per letter AND it adds 500ms to the user experience of retrieving the data on every single call. I'd like something that feels more responsive.
The React 18 updates solve my problem perfectly. Looking for a way to do this in React 17.