Sign in
Log inSign up
Chinaza Egbo

80 likes

·

2.2K reads

4 comments

Victory Asokomeh
Victory Asokomeh
Dec 2, 2020

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

3
·
Hope Philip
Hope Philip
Dec 2, 2020

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

2
·
Usman Sabuwala
Usman Sabuwala
Dec 2, 2020

A very good explanation about hooks! Keep it up!

1
·
Luísa Ribeiro Bezerra
Luísa Ribeiro Bezerra
Dec 2, 2020

Great article! :D

1
·