useLayoutEffect
Similar to useEffect but fires synchronously after all DOM mutations(react docs).
It can be used to make changes before the browser has a chance to paint.
I can think of two instances where it can be applied;
Dynamically setting document title
useLayoutEffect(() => {
document.title = "Profile";
}, []);
The page title is set before the browser has a chance to paint.
Verifying user token when your root component mounts (app)
const { handleLogout } = useAuth();
useLayoutEffect(() => {
checkTokenValidity(handleLogout);
}, [handleLogout]);
