ReactJS – useLayoutEffect hook

ReactJSWeb DevelopmentFront End Technology

In this article, we are going to see how to set up side-effects or HTTP requests in a functional component.

This hook has the similar functioning like that of useEffect hooks but rather than being called out asynchronously, it has a synchronous effect. This hook is used to load the data in the DOM synchronously and also works in the same phase like that of useEffect hook.

Note: Use useLayoutEffect hook only if useEffect hooks don't give the expected output.




In this example, we will build a React application that displays and updates the name synchronously.


import React, { useLayoutEffect, useState } from 'react';

const App = () => {
   const [name, setName] = useState('Rahul');

   useLayoutEffect(() => {
      if (name === 'Rahul') {
   }, [name]);
   return <div>{name} has email id of</div>;
export default App;

In the above example, useLayoutEffect hook is called synchronously and hence updated the state before the component is being mounted.


This will produce the following result.

Updated on 19-Mar-2021 10:52:31