title: Avoid useEffect to be triggered when one nested dependency changes
body: <p>My form has 3 fields, <code>lambda</code>, <code>period</code> and <code>filterPattern</code>. When the values of <code>lambda</code> and <code>period</code> change, it will trigger <code>handleSearch</code>. However, I don't want <code>handleSearch</code> to be triggered when <code>filterPattern</code> changes.</p>
  
  <p>If I don't put <code>filterPattern</code> in the dependency array, then <code>handleSearch</code> cannot get the latest value of <code>filterPattern</code>.</p>
  
  <p>How to avoid useEffect to be triggered when one nested dependency changes? Thanks.</p>
  
  <pre><code>const getLogQuery = useCallback(() =&gt; ({
    lambda,
    period,
    filterPattern,
  }), [lambda, period, filterPattern]);
  
  const handleSearch = useCallback(async () =&gt; {
    await getLambdaLogs(getLogQuery());
  }, [getLogQuery]);
  
  useEffect(() =&gt; {
    handleSearch();
  }, [handleSearch]);
  
  const getLambdaLogs = async (query) =&gt; {
    const logs = await LambdaService.getLambdaLogs(query);
    setLogItems(logs);
  }
  </code></pre>