React useLayoutEffect Hook

useLayoutEffect Work synchronously. and useEffect work with asynchronously.

useEffect it fires synchronously after all DOM loading is done loading.

useLayoutEffect call before DOM update.

App.js file : use hook : useEffect and useLayoutEffect both, but in console you can check first render useLayoutHook. so you can some time calculation or other stuffs before render DOM, you can go with useLayoutEffect hook.

import { createContext, useState, useLayoutEffect, useEffect } from 'react';

import './App.css';

function App() {

  let [name, setName] = useState('Ankit Vyas');

  useEffect(() => {

    console.log('call useEffect.');

    setName('Vyas');

  }, []);

  useLayoutEffect(() => {

    console.log('call useLayoutEffect.');    

    setName('Ankit');

  }, []);

  return (

    <div className="App">  

      My name is : {name}

    </div>

  );

}

export default App;