title: How to fix react Hook useEffect has missing dependencies
body: <p>I have researched a little bit about this eslint error and have tried to implement the solutions explained in a few post. But actually they made things worse. Because, if I would accept having the warning in the console, my application then seems to work. As soon as I implement one of the suggested solutions, the app fails with errors telling me there is a problem with too many renders.</p>
  <p>Basically, I have a list with regions and cities that are using &quot;useState&quot;.
  When the page displays, I want to set a region as selected. And as the cities are a part of the region-variable, I also display the cities connected to the selected region. To make this happen, I am using useEffect. More or less in this way:</p>
  <pre><code>    const [regions, setRegions] = useState(
          {
              region: 'region1', id: 1, cities: {name: 'city1', id: 1}
              ,region: 'region2', id: 2, cities: {name: 'city2', id: 1}
          }
      );
      const updateCityList = () =&gt; {
          let found = regions.find(el =&gt; el.className === 'selectedRow');
          setCities(found.cities);
      }
      useEffect(() =&gt; {
          const newArr = [...regions];
          newArr.find(el =&gt; el._id === 1).className = 'selectedRow';
          setRegions(newArr);
          updateCityList();
      }, []); 
  </code></pre>
  <p>Now, in the console I see the warning:</p>
  <pre><code>React Hook useEffect has missing dependencies: 'regions' and 'updateCityList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  </code></pre>
  <p>Putting the functions inside the useEffect's array, will cause the error with rerender.
  I also have tried using &quot;useCallback&quot;. But I got similar errors.
  The warning does not seem to be suppressed using the &quot;ignore next line&quot;. However, I would prefer to solve this warning rather then trying to hide a possible issue.</p>