title: useEffect throws an error when used to set input value
body: <p>I'm trying to make an input component that will be controlled by react and that will update it's value whenever a props is changed.</p>
  
  <p>This is how I'm doing it:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  function Component(props) {
    const [url, setUrl] = React.useState(props.value);
  
    React.useEffect(() =&gt; {
      setUrl(props.value);
    }, [props.value]);
  
    function handleChange(event) {
      setUrl(event.target.value)
    }
  
    return (
      &lt;div&gt;
        &lt;input
          type="text"
          onChange={handleChange}
          value={url}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Although the logic works I still get an error saying that my component is switching from controlled to uncontrolled, but I don't see why this would be the case.</p>