What are the differences between using useEffect and useLayoutEffect

Key Differences Between `useEffect` and `useLayoutEffect` in React:

Execution Timing:
  - `useEffect`: Runs after the browser has painted the UI. It’s asynchronous and doesn’t block the rendering process.
  - `useLayoutEffect`: Runs synchronously after all DOM mutations but before the browser paints. It can block rendering until the effect is complete.

Primary Use Cases:
  - **`useEffect`:** 
    - Best for non-UI blocking operations like data fetching, subscriptions, or logging.
    - Suitable for tasks that don’t need to alter the DOM before the paint.
  - **`useLayoutEffect`:** 
    - Ideal for operations that need to happen before the browser paints, such as reading layout measurements or synchronously changing DOM elements.
    - Helps avoid visual inconsistencies like flickering during initial renders.

- **Performance Considerations:**
  - `useEffect`: Generally better for most side effects as it avoids blocking the UI, leading to smoother user experiences.
  - `useLayoutEffect`: Should be used sparingly as it can impact performance if overused, particularly in complex components.

**When to Prefer One Over the Other:**
- **Use `useEffect`** for tasks that are not critical to the layout and visual consistency, like API calls or setting up subscriptions.
- **Use `useLayoutEffect`** when you need to make DOM measurements or manipulate the DOM synchronously to avoid layout shifts or flickering.