In React DOCs, about the useEffect() hook, we get that:

"Effects scheduled with useEffect don’t block the browser from updating the screen."

Tip

Unlike ponentDidMount or ponentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen.

What does it mean by that exactly?

Example: Imagine that I have the following:

• A controlled input
• And a useEffect after 1st render that does some expensive synchronous putation.

function App() {
  const [inputValue,setInputValue] = React.useState('');

  useEffect(()=>{
    // RUN SOME EXPENSIVE SYNCHRONOUS FUNCTION
  },[]);

  return (
    <input value={inputValue} onChange={()=>setInputValue(event.target.value)}/>
  );

}

Does it mean that I would be perfectly able to use my input (which is controlled by React using JS, which is single-threaded) even when that heavy synchronous putation is running? If so, how can this be?

In React DOCs, about the useEffect() hook, we get that:

"Effects scheduled with useEffect don’t block the browser from updating the screen."

Tip

Unlike ponentDidMount or ponentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen.

What does it mean by that exactly?

Example: Imagine that I have the following:

• A controlled input
• And a useEffect after 1st render that does some expensive synchronous putation.

function App() {
  const [inputValue,setInputValue] = React.useState('');

  useEffect(()=>{
    // RUN SOME EXPENSIVE SYNCHRONOUS FUNCTION
  },[]);

  return (
    <input value={inputValue} onChange={()=>setInputValue(event.target.value)}/>
  );

}

Does it mean that I would be perfectly able to use my input (which is controlled by React using JS, which is single-threaded) even when that heavy synchronous putation is running? If so, how can this be?

• javascript
• reactjs
• react-hooks
• use-effect

1 Answer 1

Class Component

1. Render the virtual dom.
2. ponentDidMount.
3. Paint to the browser.

Functional Component

1. Render the virtual dom.
2. useLayoutEffect.
3. Paint to the browser.
4. useEffect.

If your side effect is asynchronous, there is no difference between ponentDidMount and useEffect. (almost)
But if it is synchronous, ponentDidMount and useLayoutEffect cause a visual lag.