Debounce Callbacks on DOM events in React Apps

InstructorTyler Clark

Share this video with your friends

Send Tweet

Debouncing means managing the number of calls made within a given amount of time. The most popular time to debounce within a React application is when working with the scroll event. Let’s add a debounce function around a function listening to the scroll event.

Xavier Glab
~ 2 years ago

This is what we did in our application today, haha. Wrapped Formik setValue in lodash debounce with 200ms to ensure some delay before this function updates Formik context causing a lot of the components wrapped in <Formik /> cmp to rerender. The performance improvement was dramatic.