title: React hook useEffect() under the hood. Does an effect scheduled with useEffect block the main thread?
body: <p>In React DOCs, about the <code>useEffect()</code> hook, we get that:</p>
  <p><em><strong>&quot;Effects scheduled with useEffect don’t block the browser from updating the screen.&quot;</strong></em></p>
  <blockquote>
  <p><strong>Tip</strong></p>
  <p>Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen.</p>
  </blockquote>
  <p>What does it mean by that exactly?</p>
  <p><strong>Example:</strong> Imagine that I have the following:</p>
  <ul>
  <li>A controlled input</li>
  <li>And a useEffect after 1st render that does some expensive <strong>synchronous</strong> computation.</li>
  </ul>
  <pre><code>function App() {
    const [inputValue,setInputValue] = React.useState('');
  
    useEffect(()=&gt;{
      // RUN SOME EXPENSIVE SYNCHRONOUS FUNCTION
    },[]);
  
    return (
      &lt;input value={inputValue} onChange={()=&gt;setInputValue(event.target.value)}/&gt;
    );
  
  }
  </code></pre>
  <p>Does it mean that I would be perfectly able to use my <code>input</code> (which is controlled by React using JS, which is single-threaded) even when that heavy synchronous computation is running? If so, how can this be?</p>