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 componentDidMount or componentDidUpdate, 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:
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 computation is running? If so, how can this be?
componentDidMount
.useLayoutEffect
.useEffect
.If your side effect is asynchronous, there is no difference between componentDidMount
and useEffect
. (almost)
But if it is synchronous, componentDidMount
and useLayoutEffect
cause a visual lag.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With