title: Does the dependency array in React hooks really need to be exhaustive?
body: <p>According to the <a href="https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect" rel="nofollow noreferrer">React docs</a>:</p>
  <blockquote>
  <p>every value referenced inside the effect function should also appear in the dependencies array</p>
  </blockquote>
  <p>If my effect function references a few variables from the outer scope but I only want it to be executed when one of them changes, why do I need to specify all the other variables in the dependency array? Yes, the closure will become stale if the other variables change but I don't care because I don't need the function to be called yet. When the variable that I care about changes then the new closure with the values at that moment can be called. What am I missing?</p>
  <p>Here's a working example (to my knowledge) where the useEffect dependency arrays are not exhaustive:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  
  const allCars = {
      toyota: [&quot;camry&quot;, &quot;corolla&quot;, &quot;mirai&quot;],
      ford: [&quot;mustang&quot;, &quot;cortina&quot;, &quot;model T&quot;],
      nissan: [&quot;murano&quot;, &quot;micra&quot;, &quot;maxima&quot;],
  };
  
  function CarList() {
      const [cars, setCars] = useState([]);
      const [brand, setBrand] = useState(&quot;toyota&quot;);
      const [filterKey, setFilterKey] = useState(&quot;&quot;);
  
      useEffect(() =&gt; {
          // I don't want to run this effect when filterKey changes because I wanna wrap that case in a timeout to throttle it.
          setCars(allCars[brand].filter(model =&gt; model.startsWith(filterKey)));
      }, [brand]);
  
      useEffect(() =&gt; {
          // This effect is only called when filterKey changes but still picks up the current value of 'brand' at the time the function is called.
          const timeoutId = setTimeout(() =&gt; {
              setCars(allCars[brand].filter(model =&gt; model.startsWith(filterKey)));
          }, 500);
          return () =&gt; clearTimeout(timeoutId);
      }, [filterKey]);
  
      const handleChangeFilterKey = event =&gt; {
          setFilterKey(event.target.value);
      };
  
      return (
          &lt;div&gt;
              {`${brand} cars`}
              &lt;div&gt;Select brand&lt;/div&gt;
              &lt;input type=&quot;radio&quot; value=&quot;toyota&quot; checked={brand === &quot;toyota&quot;} onChange={() =&gt; setBrand(&quot;toyota&quot;)} /&gt;
              &lt;input type=&quot;radio&quot; value=&quot;ford&quot; checked={brand === &quot;ford&quot;} onChange={() =&gt; setBrand(&quot;ford&quot;)} /&gt;
              &lt;input type=&quot;radio&quot; value=&quot;nissan&quot; checked={brand === &quot;nissan&quot;} onChange={() =&gt; setBrand(&quot;nissan&quot;)} /&gt;
              &lt;div&gt;Filter&lt;/div&gt;
              &lt;input label=&quot;search&quot; value={filterKey} onChange={handleChangeFilterKey} /&gt;
              &lt;ul&gt;
                  {cars.map(car =&gt; (
                      &lt;li&gt;{car}&lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>Are there any pitfalls to the above example?</p>