title: How use async return value from useEffect as default value in useState?
body: <p>I've created a simple example <a href="https://codesandbox.io/s/4zq852m7j0" rel="noreferrer">https://codesandbox.io/s/4zq852m7j0</a>.</p>
  
  <p>As you can see I'm fetching some data from a remote source. I'd like to use the return value as the value inside my textfield.</p>
  
  <pre><code>const useFetch = () =&gt; {
    const [value, setValue] = useState("");
  
    useEffect(
      async () =&gt; {
        const response = await fetch("https://httpbin.org/get?foo=bar");
        const data = await response.json();
        setValue(data.args.foo);
      },
      [value]
    );
  
    return value;
  };
  </code></pre>
  
  <p>However using the value inside the <code>useState</code> function does not work. I think <code>useState</code> uses the default value only on first render. When first rendering the value is obviously not set since it's async. The textfield should have the value <code>bar</code> but it is empty.</p>
  
  <pre><code>function App() {
    const remoteName = useFetch();
    // i want to see the remote value inside my textfield
    const [name, setName] = useState(remoteName);
  
    const onChange = event =&gt; {
      setName(event.target.value);
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;p&gt;remote name: {remoteName}&lt;/p&gt;
        &lt;p&gt;local name: {name}&lt;/p&gt;
        &lt;input onChange={onChange} value={name} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>After fetching the value from remote I'd like to be able to change it locally.</p>
  
  <p>Any ideas?</p>