Handling loading and error states in T3
Hi I have just started using the T3 stack and was wondering what's the best practice for handling error loading states on the client, because I try in my frontend to do something like this.
When I do this it seems like my search input keeps re-rendering and losing focus after each keystroke. Is there something I'm missing and is this how I should be handling the state?
8 Replies
When I get rid off the spinner, it works fine without re-rendering after each stroke
It does rerender, you just don't see it. What you might want to do is setup a debounce which will help you not send a request on each keystroke, but after a specific delay.
https://www.developerway.com/posts/debouncing-in-react This is the first article I found in google about it, but I am sure you can find more information to help you
How to debounce and throttle in React without losing your mind
Deep dive into debounce and throttle in React. What is debounce and throttle, how to use them in React properly, how to avoid breaking them when state and re-renders are involved.
But the thing is that I'm sending requests on each keystroke anyway, so why does the text input lose focus when I have that fi statement in my Home page, but without it, the text retains its focus.
because you have an early return. You can try it without the spinner as well. Just setup a
console.log('rerender');
and see how it updates on each keystrokeBut I don't understand why does it lose focus when I have the spinner? How would you handle the loading state in this case then?
Because you render a different component whenever you have
isLoading
set to true, which in your case, is in every single key stroke press.
I would handle it by adding a debounce. This will allow you to type a much longer input before your spinner shows. Or change it so that the spinner is shown only in the content that sits wherever your data is shown. This way, you won't lose focus in your input field, while also showing a spinner on the page while searchingOkay thanks a lot for the help I appreciate it.
No problem. If you think your question is answered, mark it as solved.