Search code examples
javascriptreactjsreact-nativelodash

React Native: Using lodash debounce

I'm playing around with React Native and lodash's debounce.

Using the following code only make it work like a delay and not a debounce.

<Input
 onChangeText={(text) => {
  _.debounce(()=> console.log("debouncing"), 2000)()
 }
/>

I want the console to log debounce only once if I enter an input like "foo". Right now it logs "debounce" 3 times.

Solution

  • Use the useCallback React hook.

    After trying many different approaches, I found using useCallback to be the simplest and most efficient at solving the multiple calls problem.

    As per the Hooks API documentation,

    useCallback will return a memorized version of the callback that only changes if one of the dependencies has changed.

    Passing an empty array as a dependency makes sure the callback is called only once. Here's a simple implementation.

    import React, { useCallback } from "react";
import { debounce } from "lodash";

const handler = useCallback(debounce(someFunction, 2000), []);
    
const onChange = (event) => {
    // perform any event related action here
    
    handler();
 };