title: Why does storing a timeout in React context not work?
body: <p>In my root component I have a context for keeping track of an API key that expires every once in a while:</p>
  <pre><code>function App() {
      const [apiKey, setApiKey] = useState(&quot;&quot;);
      const [timeout, setTimeout] = useState(null);
      const apiKeyContextValue = {
          apiKey,
          setKey: setApiKey,
          timeout,
          setTimeout
      };
      return (
              &lt;apiKeyContext.Provider value={apiKeyContextValue}&gt;
                       &lt;ApiKeyForm/&gt;
              &lt;/apiKeyContext.Provider&gt;
      );
  
  </code></pre>
  <p>I set the api key from <code>ApiKeyForm</code>, where the user just inputs an API key; however, I also want to set a timeout that'll reset <code>apiKeyContextValue.apiKey</code> once it expires:</p>
  <pre><code>const ApiKeyForm = ()=&gt;{
      const apiKeyContext = useContext(ApiKeyContext);
      const handleSubmit = e =&gt; {
          //sets api key = to value in form input  
          apiKeyContext.setKey(e.target[0].value);
  
          //dummy debug code for now
          apiKeyContext.setTimeout(()=&gt;{
              alert('should wipe api key now');
          }, 1000) 
          
      }
      return (&lt;form onSubmit={handleSubmit}&gt;
                  ...
              &lt;/form&gt;)
  }
  </code></pre>
  <p>My issue is that when I submit my form, I get the alert from setTimeout immediately. Why is this and how would I fix this?</p>