Fix INP in Next.js

'use client';
import { useState, startTransition, useDeferredValue } from 'react';

export function SearchPage({ allItems }: { allItems: Item[] }) {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  // Filtering is expensive but not urgent -- defer it
  const filtered = allItems.filter(item =>
    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
  );

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    // The input updates immediately (urgent)
    setQuery(e.target.value);
    // No need to wrap setQuery -- useDeferredValue handles the filtering
  }

  return (
    <>
      <input value={query} onChange={handleInput} placeholder="Search..." />
      <ResultsList items={filtered} />
    </>
  );
}

// With explicit startTransition for navigation or complex updates
import { startTransition, useTransition } from 'react';

export function FilterBar({ onFilter }: { onFilter: (f: Filter) => void }) {
  const [isPending, startTransition] = useTransition();

  function handleChange(filter: Filter) {
    startTransition(() => {
      onFilter(filter); // Non-urgent: can be interrupted
    });
  }

  return (
    <div style={{ opacity: isPending ? 0.7 : 1 }}>
      {/* Filter controls */}
    </div>
  );
}

import dynamic from 'next/dynamic';

// Heavy chart library -- only loaded when the chart is visible
const RevenueChart = dynamic(
  () => import('@/components/RevenueChart'),
  {
    loading: () => <div className="h-64 bg-surface animate-pulse rounded" />,
    ssr: false,
  }
);

// Rich text editor -- only loaded when the user opens a form
const RichTextEditor = dynamic(
  () => import('@/components/Editor'),
  { ssr: false }
);

// Map component
const MapView = dynamic(() => import('@/components/MapView'), { ssr: false });

export default function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>
      <RevenueChart />
      <MapView />
    </main>
  );
}

// app/product/[id]/page.tsx
// Server Component by default -- zero client JS
import { AddToCartButton } from './AddToCartButton'; // 'use client'

async function getProduct(id: string) {
  return fetch(`/api/products/${id}`).then(r => r.json());
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  return (
    <article>
      {/* All of this is zero-JS server-rendered HTML */}
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ProductImages images={product.images} />
      <ProductSpecs specs={product.specs} />

      {/* Only the interactive button is a Client Component */}
      <AddToCartButton productId={product.id} price={product.price} />
    </article>
  );
}

// components/AddToCartButton.tsx
'use client'; // Only this component ships JS to the browser
import { useState } from 'react';

export function AddToCartButton({ productId, price }: Props) {
  const [added, setAdded] = useState(false);
  return (
    <button onClick={() => setAdded(true)}>
      {added ? 'Added to cart' : `Add to cart -- $${price}`}
    </button>
  );
}

'use client';

function AddToCartButton({ productId }: { productId: string }) {
  const [added, setAdded] = useState(false);

  function handleClick() {
    // Urgent: visual update happens immediately
    setAdded(true);

    // Non-urgent: deferred so they don't block the next paint
    const defer = (fn: () => void) =>
      'requestIdleCallback' in window
        ? requestIdleCallback(fn)
        : setTimeout(fn, 0);

    defer(() => {
      analytics.track('add_to_cart', { productId });
      localStorage.setItem('lastAdded', productId);
      syncCartToServer(productId);
    });
  }

  return (
    <button onClick={handleClick}>
      {added ? 'Added' : 'Add to cart'}
    </button>
  );
}

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

export function ProductList({ products }: { products: Product[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: products.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 80, // estimated row height in px
    overscan: 5,
  });

  return (
    <div ref={parentRef} style={{ height: '600px', overflowY: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() + 'px', position: 'relative' }}>
        {virtualizer.getVirtualItems().map(item => (
          <div
            key={products[item.index].id}
            style={{
              position: 'absolute',
              top: item.start + 'px',
              width: '100%',
              height: item.size + 'px',
            }}
          >
            <ProductRow product={products[item.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}