// ❌ BAD: Every keystroke re-renders the entire form

function Form() {

  const [name, setName] = useState('');

  const [email, setEmail] = useState('');



  return (

    <form>

      <ExpensiveChart data={heavyData} /> {/* Re-renders on every keystroke! */}

      <input value={name} onChange={e => setName(e.target.value)} />

      <input value={email} onChange={e => setEmail(e.target.value)} />

    </form>

  );

}



// ✅ GOOD: Memoize expensive components

function Form() {

  const [name, setName] = useState('');

  const [email, setEmail] = useState('');



  return (

    <form>

      <MemoizedChart data={heavyData} />

      <input value={name} onChange={e => setName(e.target.value)} />

      <input value={email} onChange={e => setEmail(e.target.value)} />

    </form>

  );

}



const MemoizedChart = React.memo(function Chart({ data }) {

  return <ExpensiveChart data={data} />;

});

// ❌ BAD: Context re-renders ALL consumers on ANY change

const ThemeContext = createContext();

const UserContext = createContext();



function App() {

  const [theme, setTheme] = useState('dark');

  const [user, setUser] = useState(null);



  return (

    <ThemeContext.Provider value={{ theme, setTheme }}>

      <UserContext.Provider value={{ user, setUser }}>

        <Dashboard /> {/* Re-renders when theme OR user changes */}

      </UserContext.Provider>

    </ThemeContext.Provider>

  );

}



// ✅ GOOD: Split contexts + use libraries for complex state

// Option 1: Separate contexts (simple apps)

<ThemeProvider>

  <UserProvider>

    <Dashboard />

  </UserProvider>

</ThemeProvider>



// Option 2: Use Zustand (complex apps)

import { create } from 'zustand';



const useTheme = create((set) => ({

  theme: 'dark',

  setTheme: (t) => set({ theme: t }),

}));



// Components only re-render when THEIR slice changes

function ThemeToggle() {

  const theme = useTheme(s => s.theme); // Only re-renders if theme changes

  const setTheme = useTheme(s => s.setTheme);

  return <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>Toggle</button>;

}

// ❌ BAD: All page components loaded upfront

import Home from './pages/Home';

import Dashboard from './pages/Dashboard';

import Settings from './pages/Settings';

// Bundle includes ALL pages even if user never visits them



// ✅ GOOD: Lazy load each route

import { lazy, Suspense } from 'react';



const Home = lazy(() => import('./pages/Home'));

const Dashboard = lazy(() => import('./pages/Dashboard'));

const Settings = lazy(() => import('./pages/Settings'));



function App() {

  return (

    <Suspense fallback={<LoadingSpinner />}>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/dashboard" element={<Dashboard />} />

        <Route path="/settings" element={<Settings />} />

      </Routes>

    </Suspense>

  );

}

// ❌ BAD: Renders ALL 10,000 items

function UserList({ users }) {

  return (

    <div>

      {users.map(user => (

        <UserRow key={user.id} user={user} />

      ))}

    </div>

  );

}



// ✅ GOOD: Only renders visible items

import { useVirtualizer } from '@tanstack/react-virtual';



function UserList({ users }) {

  const parentRef = useRef(null);



  const virtualizer = useVirtualizer({

    count: users.length,

    getScrollElement: () => parentRef.current,

    estimateSize: () => 48, // Estimated row height

  });



  return (

    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>

      <div style={{ height: virtualizer.getTotalSize() }}>

        {virtualizer.getVirtualItems().map(virtualItem => (

          <UserRow 

            key={virtualItem.key}

            user={users[virtualItem.index]}

            style={{ 

              position: 'absolute', 

              top: 0, 

              transform: `translateY(${virtualItem.start}px)` 

            }}

          />

        ))}

      </div>

    </div>

  );

}

// ❌ BAD: Search fires on every keystroke

function SearchBar() {

  const [query, setQuery] = useState('');



  const handleChange = (e) => {

    setQuery(e.target.value);

    searchAPI(e.target.value); // API call on EVERY keystroke!

  };



  return <input value={query} onChange={handleChange} />;

}



// ✅ GOOD: Debounce the API call

import { useDebouncedValue } from '@mantine/hooks';



function SearchBar() {

  const [query, setQuery] = useState('');

  const [debouncedQuery] = useDebouncedValue(query, 300);



  useEffect(() => {

    if (debouncedQuery) {

      searchAPI(debouncedQuery);

    }

  }, [debouncedQuery]);



  return <input value={query} onChange={e => setQuery(e.target.value)} />;

}

// ❌ BAD: Full resolution images

<img src="/hero-banner.jpg" alt="Banner" />



// ✅ GOOD: Responsive images + lazy loading + WebP

<picture>

  <source srcSet="/hero-banner.avif" type="image/avif" />

  <source srcSet="/hero-banner.webp" type="image/webp" />

  <img 

    src="/hero-banner.jpg" 

    alt="Banner"

    loading="lazy"

    decoding="async"

    width={1200}

    height={600}

  />

</picture>

// ✅ DO: Memoize callbacks passed to children

function Parent() {

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



  const handleClick = useCallback(() => {

    console.log('clicked');

  }, []); // Stable reference — child won't re-render



  return <MemoizedChild onClick={handleClick} count={count} />;

}



// ❌ DON'T: Memoize everything "just in case"

function BadComponent() {

  const value = useMemo(() => 2 + 2, []); // Overkill — this is trivial

  const fn = useCallback(() => 'hello', []); // Overkill — no child depends on it

  return <div>{value}</div>;

}



// Rule: Only memoize if the value is expensive to compute

// OR if it's passed to a memoized child component

// React DevTools Profiler — built-in!

// 1. Open React DevTools → Profiler tab

// 2. Click record

// 3. Interact with your app

// 4. Stop recording

// 5. See exactly which components re-rendered and why



// Chrome Performance tab for non-React performance:

// 1. F12 → Performance tab

// 2. Record

// 3. Interact

// 4. Stop

// 5. Check for long tasks (>50ms), layout thrashing, paint



// Web Vitals in code:

import { onCLS, onFID, onLCP, onINP } from 'web-vitals';



onCLS(console.log);  // Cumulative Layout Shift (< 0.1)

onFID(console.log);  // First Input Delay (< 100ms)

onLCP(console.log);  // Largest Contentful Paint (< 2.5s)

onINP(console.log);  // Interaction to Next Paint (< 200ms)