title: react debounce with useEffect
body: <p>I'm trying to implement autocomplete search with debounce,</p>
  
  <p>Below is my attempt using lodash's debounce, 
  it seems debouncing is not working.  </p>
  
  <p>I'm seeing every character being searched as I type</p>
  
  <pre><code>   const [query, setQuery] = useState('')
     const _search = () =&gt; {
       console.log('query: ', query)
       // network search request
     }
  
     const search = _.debounce(_search, 300)
  
     useEffect(() =&gt; {
       search()
     }, [query])
  
     const handleChangeQuery = useCallback((query) =&gt; {
       setQuery(query)
     })
  </code></pre>
  
  <p>** edit **</p>
  
  <p>Following works, yes I mostly got hint from <a href="https://stackoverflow.com/a/54666498/433570">https://stackoverflow.com/a/54666498/433570</a> 
  although I think it is very slightly different</p>
  
  <p>Where the linked post chains event setQuery => useEffect => useRef => debounce
  Here I'm chaining useCallback => useRef => debounce </p>
  
  <p>Although the core problem (according to the linked post) is you recreate variables inside your component everytime your functional component is called.</p>
  
  <p><code>useRef</code> saves it. </p>
  
  <p>I understood <code>useCallback</code> remembers the function but it also loses when the dependant variable changes </p>
  
  <p>It's kinda vague what it means, I thought useCallback gives you memoized function, but if you change the following code from <code>useRef</code> to <code>useCallback</code> it stops working.. (event though we don't use dependant variable such as <code>useCallback(() =&gt; {}, [var])</code> </p>
  
  <pre><code>const ReviewMetaSelect = (props) =&gt; {
  
    const [query, setQuery] = useState('')
  
  
    const search = useRef(_.debounce(query =&gt; {
  
      console.log('query: ', query)
  
    }, 300))
  
  
    // or u can use this
    //const search = useCallback(_.debounce(query =&gt; {
  
      //console.log('query: ', query)
  
    //}, 300), [])    
  
     const handleChangeQuery = useCallback((query) =&gt; {
       setQuery(query)
       search.current(query) // or search(query) with useCallback
     })
  
    return (
      &lt;View&gt;
        &lt;TextInput
          value={query}
          onChangeText={handleChangeQuery}
        /&gt;
      &lt;/View&gt;
    )
  
  }
  </code></pre>