---
title: "What is the difference between useEffect() and useLayoutEffect() in React? - GreatStack Forum"
url: "https://greatstack.dev/forum/post/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react-QrEX0"
type: "forum_post"
author: "Gaurav Maurya"
date: "2026-04-05"
tags:
  - "reactjs"
  - "useeffect"
  - "uselayouteffetc"
  - "useeffectvsuselayouteffect"
---
# What is the difference between useEffect() and useLayoutEffect() in React?

**Gaurav Maurya** · 2026-04-05 · Score: +1 · 💬 0 comments · 👁 17 views

Tags: `reactjs`, `useeffect`, `uselayouteffetc`, `useeffectvsuselayouteffect`

---

In React, many developers get confused between **useEffect()** and **useLayoutEffect()** because both are used to handle side effects in functional components. However, the main difference is in **when they execute**. 

The **useEffect()** function runs after the component renders and the changes are visible on the screen. It does not block the UI rendering, so it is mainly used for API calls, fetching data, timers, and event listeners. On the other hand, 

**useLayoutEffect()** runs synchronously after the DOM is updated but before the browser paints the screen. This means it can block the visual update until its work is finished, so it is mostly used when we need to measure DOM elements, adjust layout, or fix visual glitches.

### useEffect()

- Runs **after rendering**

- Does **not block UI**

- Used for:

- API calls

- Data fetching

- Timers

- Event listeners

- Better for performance ✅

### useLayoutEffect()

- Runs **before screen paint**

- **Blocks UI** until finished

- Used for:

- DOM measurements

- Layout changes

- Animations

- Can affect performance. ⚠️

---

_Read and discuss at [GreatStack](https://greatstack.dev/forum/post/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react-QrEX0)._