import React, { useState } from 'react';

// This child component is 'slow' or 'expensive'
function SlowComponent({ data }) {
  console.log('Rendering SlowComponent...');
  return 
Data is: {data}
;
}

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

  return (
    

      
Parent Count: {count}
      {/ This button re-renders App, which re-renders SlowComponent /}
       setCount(count + 1)}>Increment Count

      {/ SlowComponent's prop 'data' never changes, but it re-renders /}
      {/ every time 'count' changes. This is the problem. /}
      
    
  );
}

import React, { useState } from 'react';

// 1. Wrap the component in React.memo()
const MemoizedSlowComponent = React.memo(function SlowComponent({ data }) {
  console.log('Rendering SlowComponent...');
  return 
Data is: {data}
;
});

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

  return (
    

      
Parent Count: {count}
       setCount(count + 1)}>Increment Count

      {/ 2. Now, this component will ONLY re-render if its 'data' prop changes. /}
      {/ Since 'data' never changes, it will not re-render when 'count' changes. /}
      
    
  );
}

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import AdminPage from './AdminPage'; // <-- This is bundled immediately

function App() {
  return (
    
      } />
      } />
      } />
    
  );
}

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';

// 1. Use React.lazy() to import components dynamically
const AboutPage = lazy(() => import('./AboutPage'));
const AdminPage = lazy(() => import('./AdminPage'));

function App() {
  return (
    // 2. Wrap your lazy components in a  boundary
    // This 'fallback' will show while the JS chunk is loading
    Loading page...

The result: The user's initial download is tiny (only HomePage and core libs). When they click a link to '/about', React will fetch the 'AboutPage.js' chunk and then render it. This makes the initial page load much faster.

Understanding React's Reconciliation Algorithm (and 'key' prop)

Interview Question: 'What is Reconciliation? And why are 'keys' important?'

This question checks your understanding of how React updates the DOM.

What is the Virtual DOM (VDOM)?

First, you have to mention the Virtual DOM. The VDOM is a lightweight, in-memory copy of the real browser DOM. When your state changes, React first creates a new VDOM tree.

What is Reconciliation?

Reconciliation is the process React uses to update the real DOM to match the new VDOM. It's the 'diffing' algorithm.

React compares the new VDOM tree with the old one and finds the absolute minimum number of changes needed. For example, instead of rebuilding an entire component, it might just find that one text node changed and update only that.

Why is the key Prop So Important for Lists?

This is the most critical part of the answer. When React 'diffs' a list of children, it needs a way to track which child is which between renders.

This is what the key prop does. It must be a stable, unique string or number that identifies that item.

Code Example: The Problem (Using index as a key)

If you use the array index as a key, you can break React's reconciliation.

// Our list of users
const [users, setUsers] = useState([
  { id: 'a', name: 'Alice' },
  { id: 'b', name: 'Bob' }
]);

// Later, we add a new user to the beginning
setUsers([
  { id: 'c', name: 'Charlie' }, // <-- New user at the start
  { id: 'a', name: 'Alice' },
  { id: 'b', name: 'Bob' }
]);

// If we render with index as key:

  {users.map((user, index) => (
    
{user.name}
 // <-- BAD PRACTICE!
  ))}


// What React sees:
// Before: key=0 ('Alice'), key=1 ('Bob')
// After:  key=0 ('Charlie'), key=1 ('Alice'), key=2 ('Bob')
//
// React thinks you changed 'Alice' to 'Charlie' and 'Bob' to 'Alice'
// and added 'Bob'. It will destroy and re-create DOM nodes, which is slow
// and can break state inside the 
 components.

Code Example: The Solution (Using a stable id)

// If we render with a stable ID as key:

  {users.map((user) => (
    
{user.name}
 // <-- GOOD PRACTICE!
  ))}


// What React sees:
// Before: key='a' ('Alice'), key='b' ('Bob')
// After:  key='c' ('Charlie'), key='a' ('Alice'), key='b' ('Bob')
//
// React knows that 'a' and 'b' are still the same and just moved.
// It will create one new DOM node for 'c' and insert it at the beginning.
// This is much faster and preserves state.

The simple answer: 'Reconciliation is React's 'diffing' algorithm for updating the DOM. The key prop is a stable ID that helps React track items in a list, so it can perform minimal updates (like moving or adding an item) instead of re-creating all of them.'

How to Profile Your React App with the Profiler Tool

Interview Question: 'My app is slow. How do you find the problem?'

The worst answer is 'I would start adding React.memo everywhere.' The best answer is: 'I would use the React DevTools Profiler to find the bottleneck.'

You cannot fix what you cannot measure. The Profiler is the tool for measuring.

How to Use the Profiler

1. Install React DevTools: It's a browser extension for Chrome and Firefox.
2. Open DevTools: In your browser, open the developer tools (F12) and find the 'Profiler' tab.
3. Record a Scenario: Hit the 'Start profiling' (blue circle) button in the Profiler tab. Then, perform the action in your app that feels slow (e.g., typing in a text field, opening a modal, filtering a list).
4. Stop Profiling: Hit the 'Stop' button.

What to Look For

The Profiler gives you two main charts. The most useful one is the Flame Graph.

1. Look for Wide Bars (Slow Commits)

The width of each bar shows how long that component (and its children) took to render. Look for wide, flat bars at the top. This is your 'slow' component.

2. Look for Unnecessary Re-renders

Click on a component in the chart. On the right, the Profiler will tell you why it re-rendered. Often, you will see 'Props changed' or 'Hooks changed'. This tells you what to investigate.

Example Scenario:

You profile typing into a search box. In the flame graph, you see that your entire