title: React hooks: why does useEffect need an exhaustive array of dependencies?
body: <p>I've got the following use case in a React component.</p>
  <p>It is a search user input that uses <a href="https://react-autosuggest.js.org/" rel="nofollow noreferrer">React Autosuggest</a>. Its value is always an ID, so I only have the user ID as a prop. Therefore at first load to show the username value, I need to fetch it at first mount.</p>
  <p>EDIT: I don't want to fetch the value again when it changes later, because I already have the value from my suggestions request.</p>
  <pre><code>type InputUserProps = {
    userID?: string;
    onChange: (userID: string) =&gt; void;
  };
  
  // Input User is a controlled input
  const InputUser: React.FC&lt;InputUserProps&gt; = (props) =&gt; {
    const [username, setUsername] = useState&lt;string | null&gt;(null);
  
    useEffect(() =&gt; {
      if (props.userID &amp;&amp; !username) {
        fetchUsername(props.userID).then((username) =&gt; setUsername(username));
      }
    }, []);
  
    async function loadSuggestions(inputValue: string): Suggestion[] {
      return fetchSuggestions(inputValue);
    }
  
    function selectSuggestion(suggestion: Suggestion): void {
      props.onChange(suggestion.userID); // I don't want to rerun the effect from that change...
      setUsername(suggestion.username); // ...because I set the username here
    }
  
    return (
      &lt;InputSuggest
        value={props.userID}
        label={username}
        onSuggestionsRequested={loadSuggestions}
        onSuggestionSelected={selectSuggestion}
      /&gt;
    );
  };
  
  export default InputUser;
  </code></pre>
  <p>(I'm adding a simplified way this component is called)</p>
  <pre><code>const App: React.FC&lt;AppProps&gt; = (props) =&gt; {
      // simplified, I use react-hook-form in the real code
      const [userID, setUserID] = useState&lt;string?&gt;(any_initial_value_or_null);
      return &lt;InputUser userID={userID} onChange={(newValue)=&gt;setUserID(newValue)} /&gt;
  };
  
  export default App;
  </code></pre>
  <p>It works, but I have the following warning on my useEffect hook</p>
  <pre><code>React Hook useEffect has missing dependencies: 'props.userID' and 'username'. Either include them or remove the dependency array.eslint(react-hooks/exhaustive-deps)
  </code></pre>
  <p>But if I do so, I will run it more than once as the username value is changed by the hook itself! As it works without all the dependencies, I'm wondering:</p>
  <ul>
  <li>How can I solve my case cleanly?</li>
  <li>What are those dependencies for and why is it advised to be exhaustive with them?</li>
  </ul>