Debounce Requests in React Router v7


React Router Tip

Debounce Requests in React Router v7

Have you ever implemented a search input filter for table or grid of data in your app that needs to initiate fetching new, filtered, data? If you want to initiate the requests as the user changes the filter value without having to manually click a submit button you likely want to debounce those requests. Do you use a debounce hook and resort to useEffect to kick of requests?? No! There's a much easier way that doesn't involve adding a single hook to your components. Let me show you exactly how in ​this video​. Or you can ​read the blog post here.

Currently Reading

I'm a big fan of books. Fiction, non-fiction doesn't matter. If it's compelling, I'm down. I just finished The River of Doubt by Candice Millard. It's about Teddy Roosevelt and his crew's adventurous trip down an uncharted tributary in the Amazon. It's an incredible story filled with mosquitoes, piranhas, malaria, drowning, hostile Indians, murder, and starvation, among other things. Pretty much everything that could go wrong does but somehow they make it out. It's a story of tribulation but also triumph. Roosevelt was known for doing hard things just for the sake of them being difficult. There's a lot of psychological benefit to just doing hard stuff. That feeling of accomplishment is euphoric. This book isn't only just really entertaining but an excellent reminder to not just coast by in life. Highly recommend both this perspective and the book.


Is there anything React Router related you'd like me to cover? What are you working on? Reading anything good? Reply back to this email. I'd love to hear from ya.

Have a stellar Monday ✌️

ProgrammingAreHard

For developers looking to learn useful tips and tricks.

Read more from ProgrammingAreHard

Hey y'all, David here. You signed up for my newsletter at programmingarehard.com. I'm super jazzed about what I have for you today! One of the inherent benefits of Single Page Apps(SPAs) I took for granted was the logging that comes out of the box via the Network tab in the console. Every api request happens in the browser and you can easily inspect those which is super handy. Once you move to something like Remix/React Router 7, you become painfully aware that you've lost access to that...

Hey y'all, David here. You signed up for my newsletter at programmingarehard.com. Sometimes I have ideas I want to test out in my Remix / React Router apps. But.... I don't want the overhead of doing it in my actual apps or, on the opposite end of the spectrum, want to start from a blank slate. I found the address book tutorial and thought that surely the end result was published somewhere. Not the case. So I went ahead and bit the bullet by going through it and pushing the end result to a...

Hey y'all, David here. You signed up for my newsletter at programmingarehard.com. I'm writing to let you know I've just published a new post about simple trick that seems magical if you don't know how it's working behind the scenes: pasting into multiple form fields at once. Pasting into multiple fields at once. Hope it gives you some idea. Have a stellar Wednesday. ✌️ David