title: How to focus something on next render with React Hooks
body: <p>I'm playing with hooks, and I'm trying to do the following:</p>
  
  <pre><code>import React, { useState, useRef } from 'react';
  
  const EditableField = () =&gt; {
    const [isEditing, setEditing] = useState(false);
    const inputRef = useRef();
    const toggleEditing = () =&gt; {
      setEditing(!isEditing);
      if (isEditing) {
        inputRef.current.focus();
      }
    };
    return (
      &lt;&gt;
        {isExpanded &amp;&amp; &lt;input ref={inputRef} /&gt;}
        &lt;button onClick={toggleEditing}&gt;Edit&lt;/button&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>This is going to fail, because <code>current</code> is null, since the component haven't re-rendered yet, and the input field is not yet rendered (and therefore can't be focused yet).</p>
  
  <p>What is the right way to do this? I can use the <a href="https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state" rel="noreferrer"><code>usePrevious</code></a> hook proposed in the React Hooks FAQ, but it seems like a painful workaround. </p>
  
  <p>Is there a different way?</p>