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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jul 10, 2019 at 10:05 cbdevelopercbdeveloper 31.6k4545 gold badges202202 silver badges397397 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.