React Native: Using lodash debounce

Issue

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 returns 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();
 };

Answered By - Sameer Ingavale