React’s efficiency comes from three key concepts: the **Virtual DOM**, **Diffing**, and **Reconciliation**.


**What is the Virtual DOM?**

The **Virtual DOM** in React is a lightweight JavaScript representation of the actual DOM. It allows React to efficiently update the UI by comparing the current Virtual DOM with a previous version and applying only the necessary changes to the real DOM.

```js
const virtualDOM = {
  type: 'div',
  props: {
    id: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello, Virtual DOM!'
        }
      },
      {
        type: 'ul',
        props: {
          children: [
            {
              type: 'li',
              props: {
                children: 'Item 1'
              }
            },
            {
              type: 'li',
              props: {
                children: 'Item 2'
              }
            }
          ]
        }
      }
    ]
  }
};
```

**What is Diffing?**

When a component's **state** or **props** change, React **re-renders** it by creating a **new Virtual DOM tree**.
It then uses a process called **diffing** to compare the new Virtual DOM with the previous one.

The **diffing algorithm** efficiently detects the **smallest set of changes** needed to update  the real DOM, ensuring fast and optimized UI updates.

**What is Reconciliation?**

**Reconciliation** is the overall **process** React uses to update the UI in response to data changes:

- rendering components to a new Virtual DOM
- running the diffing algorithm
- Applying the minimal updates to the real DOM


Virtual DOM, Diffing & Reconciliation

How React uses the Virtual DOM, diffing algorithm, and reconciliation process to efficiently update the user interface.

React

Virtual DOM

Before React 18, complex rendering during user interactions such as typing or clicking often caused performance issues. Because React’s rendering was synchronous and blocking, heavy updates could freeze the UI, making input laggy and clicks feel unresponsive.

With React 18, Concurrent React introduces a new rendering model where updates are interruptible, prioritized, and non-blocking.

Rendering is broken down into small units of work that React can pause, resume, or cancel if something more urgent happens, like user input.

**Key features:**

- **Interruptible rendering**: React 18 can pause ongoing work to quickly respond to user actions such as clicks or typing.
- **Cancelable and restartable rendering**: If new data arrives while React is rendering, it can discard the current work and restart with the latest updates.
- **Prioritization**: Urgent updates (like typing or clicking) are prioritized over less critical ones (like data fetching).


**How It Works Under the Hood**

React still uses the Virtual DOM, diffing, and reconciliation, but:
- rendering is split into chunks
- these chunks can be paused or interrupted
- only after rendering is complete, React commits the changes to the DOM (this is still synchronous)

**APIs and Hooks for Enabling Concurrent Features**

**1.Concurrent Rendering Root API**
The **createRoot()** method enables concurrent rendering in React by allowing React to batch state updates more efficiently and prepare the app for concurrent behavior. However, it doesn’t activate any specific concurrent features on its own. To actually take advantage of concurrent capabilities, you need to use additional APIs like the **Suspense** component, **useTransition**, or **useDeferredValue** hooks.

```jsx
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

```

**2.Suspense**
Lets you **pause rendering** while waiting for async data or lazy-loaded components. It shows a fallback UI during the wait.

```jsx
<Suspense fallback={<Loading />}>
  <LazyComponent />
</Suspense>
```


**3.useTransition()**

**useTransition** lets you mark some state updates as “low priority” or “non-urgent”  to defer heavy UI tasks, keeping the interface responsive for urgent actions like typing or clicking.

```jsx
const [isPending, startTransition] = useTransition();

const handleChange = (newValue) => {
  startTransition(() => {
    setSearchQuery(newValue); // This update is low priority
  });
};
```

**4.useDeferredValue()**
Allows you to defer a value until the UI has finished more urgent updates. Ideal for delaying expensive computations or rendering based on changing input.

```jsx
 const deferredQuery = useDeferredValue(query);
```

How Concurrent React Improves UI Responsiveness

Concurrent React introduces a new, interruptible rendering model that makes UIs more responsive

Concurrent React

## What is **useState** ?

**useState** is a built in React hook that always you to add state to a functional component. It returns an array containing two values:
1. The current state value.
2. A function that allows you to update that state

Example:


```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

```

In this example:

- **count** is the current state value.
- **setCount** is the function used to update it.
- the component re-renders every time you call **setCount**.

## How does useState work?
When React renders your component for the first time, it initializes the state with the value you pass to **useState**. On subsequent renders, React preserves and returns the most recent state value, even if the component’s logic runs again.

Each time you update the state using the setter function , React triggers a re-render so your UI always reflects the latest state.

In React, state updates are **batched**. This means that react groups multiple setState calls (which happen during the same task and its microtask) togheter before performing a re-render. This batching helps improve performance by avoiding unnecessary renders.

So when batching happens, it’s recommended to use functional updates if the next state depends on the previous state. This ensures React uses the correct, most recent value.

Using state directly (can lead to incorrect results when batching)


```jsx

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
  // Both updates use the old value of count (0)
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
    {/* On click, count will only increase by 1 instead of 2 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```

Because of batching, both updates use the same old value of count, so React only increases it by 1.

Using functional updates (uses the latest value each time)
```jsx
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // Each update receives the latest count value
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      {/* On click, count will correctly increase by 2 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```
Here, React uses the most up-to-date value for each update, so the counter correctly increases by 2 after one click.

Incrementing inside setTimeout without functional updates:

```jsx
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1); //  uses the 'count' from when Counter last rendered
    }, 1000);
  };

  return (
    <div>
      {/* Even if you click 5 times quickly (within the 1-second timer interval), 
      it will only go up by 1 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```

**What happens:**

- Each time the component renders, React runs the **Counter()** function ,this creates a new closure that holds the current value of **count**.
- When you click, the **setTimeout** callback is created inside that closure, so it “remembers” the **count** value from that render (for example: 0).
- If you click 5 times quickly (within the 1-second timer interval), you create 5 timers — but all of them remember the same old value (0).
- After 1 second, all the timeouts run and call setCount(0 + 1), so the final value is 1, not 5.

You can explore how these examples work by [clicking here](http://localhost:3000/examples/hooks/usestate)

#### Batching across diferent situations

1) Same task ( inside an event handler) →  Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(c => c + 1);
    setCount(c => c + 1);
    // Batched — React will render once
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```

2. Microtask ( inside a Promise or after await) → Still Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = async () => {
    setCount(c => c + 1);
    await Promise.resolve();
    setCount(c => c + 1);
    //  Still batched in React 18+ — one render
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```
3. New task (setTimeout) →  Not Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(c => c + 1);

    setTimeout(() => {
      setCount(c => c + 1);
      //  New task → triggers another render
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```

4. Multiple updates inside the same timeout →   Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {

    setTimeout(() => {
      setCount(c => c + 1);
    setCount(c => c + 1);
      
      //  In the same timeout task → batched togheter
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```


Managing State in React: useState Hook

How useState hook works in React, how to manage component state, common patterns and best practices.

UseState Hook in React

## What is **useEffect** ?

**useEffect** is a built in React hook that lets you perform side effects in function components, such as fetching data, subscribing to events, or interacting with the DOM.Tasks that occur outside of React’s render cycle.

### **A side effect in React is anything that occurs outside the normal render cycle, such as:**
- Fetching or sending data over the network
- Setting timers or intervals
- Interacting with browser APIs 
- Subscribing or unsubscribing from events

### How **useEffect** behaves:
- **Mounting Phase:** runs once after first render. Cleanup does not run yet.
- **Updating Phase:** runs whenever a dependency changes. Cleanup from the previous effect runs first.
-  **Unmounting Phase:**  cleanup runs when the dependency changes or before the component is removed.

###  **useEffect**  Lifecycle:

```jsx
useEffect(() => {
  // Runs AFTER the component is rendered (painted)
  // Good for: fetching data, subscriptions, timers, DOM updates

  return () => {
    // Runs BEFORE:
    // Component is removed (unmount)
    //  Effect is re-run due to dependency change
    // Good for: clearing timers, unsubscribing, cancelling fetches
  };
}, [dependencies]);
```



### **Example that fetches articles, autosaves, and manages cleanup when components unmount.**

**The Component**

We have an **ArticleViewer** component that:
1. Fetches article data when articleId changes
2. Autosaves every 2 seconds
3. Cleans up timers when the component unmounts


```jsx
function ArticleViewer({ articleId, onUnmount, addLog }) {
  const [article, setArticle] = useState(null);
  const [loading, setLoading] = useState(true);
  const [autosaveCount, setAutosaveCount] = useState(0);

  // Fetch article when articleId changes
  useEffect(() => {
    setLoading(true);
    addLog(`🔄 Fetching article ${articleId}...`);

    const fetchArticle = async () => {
      await new Promise(res => setTimeout(res, 1000));
      setArticle({ id: articleId, title: `Article ${articleId}`, content: `This is the content of article ${articleId}.` });
      setLoading(false);
      addLog(`✅ Article ${articleId} loaded.`);
    };

    fetchArticle();
  }, [articleId, addLog]);

  // Autosave every 2s
  useEffect(() => {
    const interval = setInterval(() => {
      setAutosaveCount(c => c + 1);
      addLog(`💾 Autosaved article ${articleId}`);
    }, 2000);

    return () => {
      clearInterval(interval);
      setAutosaveCount(0);
      addLog(`🛑 Cleared autosave interval for article ${articleId}`);
    };
  }, [articleId, addLog]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      addLog(`❌ Viewer component for article ${articleId} unmounted.`);
      if (onUnmount) onUnmount();
    };
  }, [articleId, addLog, onUnmount]);

  return (
    <Paper elevation={3} sx={{ padding: 4, mt: 4 }}>
      <Typography variant="h5" gutterBottom>Article Viewer</Typography>
      {loading ? (
        <Box display="flex" alignItems="center" gap={2}>
          <CircularProgress size={24} />
          <Typography>Loading article...</Typography>
        </Box>
      ) : (
        <Box>
          <Typography variant="h6">{article.title}</Typography>
          <Typography>{article.content}</Typography>
          <Typography variant="body2">Autosaved {autosaveCount} time{autosaveCount !== 1 ? 's' : ''}</Typography>
        </Box>
      )}
    </Paper>
  );
}

```



The **ExamplesUseEffect** component manages:

1. Changing article IDs
2. Mounting/unmounting the viewer
3. Logging activity

```jsx
function ExamplesUseEffect() {
  const [articleId, setArticleId] = useState(1);
  const [showViewer, setShowViewer] = useState(true);
  const [status, setStatus] = useState("🟢 Viewer is active.");
  const [log, setLog] = useState(["🚀 Viewer mounted."]);

  const handleUnmount = useCallback(() => setStatus("🔴 Viewer was unmounted."), []);
  const addLog = useCallback(entry => setLog(prev => [...prev, entry]), []);

  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" gutterBottom>useEffect Lifecycle Example</Typography>
      <Typography variant="body2" sx={{ mb: 2 }}>{status}</Typography>

      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
        <Button variant="contained" onClick={() => setArticleId(prev => prev + 1)} disabled={!showViewer}>
          Load Next Article
        </Button>
        <Button variant="contained" onClick={() => setLog([])}>Clear logs</Button>
        <Button variant="outlined" color="secondary" onClick={() => {
          if (showViewer) setShowViewer(false);
          else { setShowViewer(true); setStatus("🟢 Viewer is active."); addLog("🚀 Viewer remounted."); }
        }}>
          {showViewer ? "Unmount Viewer" : "Mount Viewer"}
        </Button>
      </Stack>

      {showViewer ? (
        <ArticleViewer articleId={articleId} onUnmount={handleUnmount} addLog={addLog} />
      ) : (
        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Viewer is not visible.</Typography>
      )}

      {/* Activity logs */}
      <Box mt={4}>
        <Typography variant="h6">📋 Activity Log:</Typography>
        <ul>
          {log.map((item, i) =>   (
          <li key={`${index}-${item}`}>
            <Typography variant="caption">
            {item}
            </Typography>
          </li>)}
        </ul>
      </Box>
    </Box>
  );
}

```


Managing SideEffects in React: useEffect hook

How useEffect hook manages side effects like component mounting, updating and unmounting. Helping you handle data fetching, subscriptions and cleanup

useEffect Hook in React

## What Is useLayoutEffect?

**useLayoutEffect** is a React hook that runs **synchronously after the DOM has been updated**, but **before the browser paints the screen**.

This means:
- The DOM is already updated  
- The user hasn't seen the update yet  
- You can measure layout and perform changes *before* the screen visually updates  


## How useLayoutEffect Differs from useEffect

 **useEffect:**
- Runs **after** the browser paints  
- Does **not** block rendering  
- Best for async tasks, fetching, subscriptions  

**useLayoutEffect:**
- Runs **before** painting  
- Blocks rendering  
- Best for layout reads/writes (e.g., measuring size, position, scroll)





Managing SideEffects in React: useLayoutEffect hook

How useLayoutEffect  manages synchronous side effects in React and how it differs from useEffect maybe enhance it

Front end

Virtual DOM, Diffing & Reconciliation

How Concurrent React Improves UI Responsiveness

Managing State in React: useState Hook

Managing SideEffects in React: useEffect hook

Managing SideEffects in React: useLayoutEffect hook