Storing state in search params
Hi everyone. I have a non-controlled search input with a default value from useSearch(). The input has a debounced onChange handler that takes the final value and pushes it to the search params using useNavigate(). My issue is, the entire layout rerenders when I update the search params and the input loses focus which is not a good experience. The alternative would be to add a submit button and let the user click that when they are done typing but I'd like to know if there's a way avoid that.
Also, I noticed that on wrapping the navigate() in a startTransition, 'isTransitioning' is never true. The navigation just happens silently and my loading spinner inside the search input never triggers.
Also, I noticed that on wrapping the navigate() in a startTransition, 'isTransitioning' is never true. The navigation just happens silently and my loading spinner inside the search input never triggers.
2 Replies
vicious-gold•2mo ago
Mind sharing a Stackblitz repo/code example? I can probably lend a hand
wise-white•2mo ago
Since you mentioned startTransition, are you using Suspense? Check where your Suspense component is, if it’s higher up than your input is, I would try to move it further down so that it wraps the components that display your data, and not the input field.