title: How do i properly use useEffect for a async fetch call with react? react-hooks/exhaustive-deps
body: <p>Hi i'm facing a problem with the <code>useEffect</code> hook in React. The code below works like it should but es-lint suggests that i need to provide dependencies in the dependency array from the <code>useEffect</code>.</p>
  <h2>Working code with <code>// eslint-disable-next-line react-hooks/exhaustive-deps</code></h2>
  <pre><code>export default function UsersList() {
     const [users, setUsers] = useState&lt;User[]&gt;([]);
     
     const { setError } = useContext(errorContext);
     const { isLoading, setIsLoading } = useContext(globalContext);
     
     useEffect(() =&gt; {
         if (users.length &lt; 1) {
           fetchUsers();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
  
       async function fetchUsers () {
         try {
           setIsLoading(true);
           const fetchedUsers = await api.getUsers();
           setUsers(fetchedUsers);
         } catch (error) {
           setError(error);
         } finally {
           setIsLoading(false);
         }
       }
  }
  </code></pre>
  <h2>Infinite looping code</h2>
  <p>i tried to write it like this the code triggers a infinite loop.. (because the states get constantly changed inside the function and triggers the <code>useEffect</code> every time because of the declared dependencies)</p>
  <pre><code> useEffect(() =&gt; {
      async function fetchUsers () {
        try {
          setIsLoading(true);
          const fetchedUsers = await api.getUsers();
          setUsers(fetchedUsers);
        } catch (error) {
          setError(error);
        } finally {
          setIsLoading(false);
        }
      }
  
      if (users.length &lt; 1) {
        fetchUsers();
      }
    }, [setIsLoading, setError, users]);
  </code></pre>
  <p>i also tried putting the <code>fetchUsers()</code> inside the dependencies array but this had no effect.</p>
  <p>How do i properly set up a async call when the component mounts without having to use <code>// eslint-disable-next-line react-hooks/exhaustive-deps</code> ?</p>