Common React Hooks cheatsheet - React, Redux, Router and Ionic friendly

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]);

This is lovely, I like how you explain the useEffect Hook

A very good explanation about hooks! Keep it up!

Great article! :D