React Functional Components and Lodash High-Order Functions

How to seamlessly use Lodash high-order functions like debounce and throttle in your React functional components

Photo by Bernard Hermant on Unsplash.

Although modern browsers keep adding support to utility functions (thus rendering Lodash not as useful), you may still find yourself in a situation where you need/want to use Lodash for whatever reason.

And with React being one of the most popular front-end libraries, it’s very likely that you will eventually need to use both in conjunction. It might seem like a trivial task (and it is), but when we put functional components and hooks together in the mix, there can be some pitfalls. I hope this article helps you avoid them.

This article applies to all the high-order utility functions provided by Lodash, but we’ll focus on debounce and throttle.

Table Of Contents

· TL;DR
  ∘ Module/file scope function
  ∘ Component scope function
· Debounce
· Throttle
· Conclusion

TL;DR

The most important thing is to avoid defining the function more than once.

Module/file scope function

If the function doesn’t need access to the component’s scope, you can simply define it outside of the component:

Component scope function

We can use useCallback to ensure that the debounced function is created only once and is reused throughout the component’s lifecycle if it needs access to the component’s scope:

Debounce