Interaction to Next Paint

What is INP

Interaction to Next Paint measures the latency of all interactions throughout the page lifecycle.

How INP Works

1. Records all interactions (clicks, taps, keyboard)
2. Groups interactions by session
3. Reports the worst-case interaction latency
4. Excludes outliers (highest and lowest)

INP vs FID

Measuring INP

import { onINP } from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
  console.log('Rating:', metric.rating);
  
  // Get detailed timing
  metric.entries.forEach((entry) => {
    console.log('Interaction:', entry.name);
    console.log('Start:', entry.startTime);
    console.log('Duration:', entry.duration);
  });
});

Thresholds

Common INP Issues

1. Long JavaScript tasks blocking the main thread
2. Excessive DOM size slowing down event handling
3. Layout thrashing from forced synchronous layouts
4. Memory pressure causing garbage collection pauses

Optimizing Event Handlers

Debounce and Throttle

// Debounce: Wait for pause in events
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// Throttle: Execute at most once per interval
function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      return fn(...args);
    }
  };
}

// Usage
function SearchInput({ onSearch }) {
  const debouncedSearch = useMemo(
    () => debounce(onSearch, 300),
    [onSearch]
  );

  return (
    <input
      type="search"
      onChange={(e) => debouncedSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

Passive Event Listeners

// Use passive listeners for scroll and touch events
useEffect(() => {
  const handleScroll = () => {
    // Handle scroll
  };

  window.addEventListener('scroll', handleScroll, { passive: true });
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

Event Delegation

// Instead of individual handlers
function TodoList({ todos, onToggle, onDelete }) {
  const handleClick = (e) => {
    const target = e.target;
    const todoId = target.dataset.todoId;
    
    if (target.matches('[data-action="toggle"]')) {
      onToggle(todoId);
    } else if (target.matches('[data-action="delete"]')) {
      onDelete(todoId);
    }
  };

  return (
    <ul onClick={handleClick}>
      {todos.map(todo => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            data-action="toggle"
            data-todo-id={todo.id}
          />
          <span>{todo.text}</span>
          <button data-action="delete" data-todo-id={todo.id}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

Non-Blocking Event Handlers

// Use requestIdleCallback for non-urgent work
function handleButtonClick() {
  // Urgent: Update UI immediately
  setIsLoading(true);

  // Non-urgent: Analytics can wait
  requestIdleCallback(() => {
    analytics.track('button-click');
  });
}

// Use setTimeout to break up work
function processItems(items) {
  const chunkSize = 100;
  let index = 0;

  function processChunk() {
    const end = Math.min(index + chunkSize, items.length);
    for (; index < end; index++) {
      processItem(items[index]);
    }

    if (index < items.length) {
      setTimeout(processChunk, 0);
    }
  }

  processChunk();
}

Main Thread Work

Identifying Long Tasks

// Performance observer for long tasks
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 50) {
      console.warn('Long task:', entry.duration, 'ms');
      console.log('Start:', entry.startTime);
      console.log('End:', entry.startTime + entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['longtask'] });

Web Workers

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

// Main thread
const worker = new Worker('/worker.js');

worker.postMessage(largeData);
worker.onmessage = (e) => {
  setResult(e.data);
};

React Concurrent Features

import { startTransition, useDeferredValue } from 'react';

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      <Results query={deferredQuery} />
    </div>
  );
}

function handleSearch(e) {
  const value = e.target.value;
  startTransition(() => {
    setSearchQuery(value);
  });
}

Code Splitting

// Route-based splitting
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// Component-based splitting
function HeavyComponent() {
  const [loaded, setLoaded] = useState(false);
  const [Component, setComponent] = useState(null);

  const load = async () => {
    const mod = await import('./HeavyComponent');
    setComponent(() => mod.default);
    setLoaded(true);
  };

  if (!loaded) {
    return <button onClick={load}>Load Component</button>;
  }

  return <Component />;
}