JAVASCRIPT

debounce in react native hooks

// create a debounced effect custom hook in file ./useDebouncedEffect.js

import { useEffect } from 'react';

export const useDebouncedEffect = (effect: any, deps: any, delay: any) => {
    useEffect(() => {
        const handler = setTimeout(() => effect(), delay);
        return () => clearTimeout(handler);
    }, [...deps || [], delay]);
};

// use it inside your component (I am using it in App.js)

import { useState } from "react";
import { useDebouncedEffect } from "./useDebouncedEffect";

const App = () => {
  const [value, setValue] = useState('')

  useDebouncedEffect(() => {
    // write your code here
    console.log(value)
    
  }, [value], 1000);
  
  const handleChange = (e) => {
    setValue(e.target.value);
  }

  return (
    <button onClick={handleChange}>{value}</button>
  )
}

export default App;