- Debounce Your React and Redux Code to Improve PerformanceA debounce is a tool that every web developer should have in their kit.
- Letâs take a look at the individual steps to understand how much we actually saved.After the debounce time expires after the final key press, the first step is to make our API call.
- Since we have debounced the function that fetches from our API, we only make the request once at the end of typing into the input.There are two things happening hereâââretrieving projects from the database and then performing heavy calculations to filter and sort the data.
- By debouncing, we prevent the setState() which serves to significantly reduce the number of times we force React to reconcile and append the list to the DOM.Without a debounce, this component would be almost unusable with such a large amount of data.
- In addition, you should consider wrapping any interaction that triggers excessive calculations or API calls with a debounce.
A debounce is a tool that every web developer should have in their kit. It improves performance by limiting the number of expensive calculations, API calls, and DOM updates. Although the debounce…
Continue reading “Debounce Your React and Redux Code to Improve Performance”