What techniques reduce INP on a React app with expensive renders?

INP > 200ms usually means the main thread is too busy to respond to user input quickly. React-specific techniques:

1. React 18 startTransition

import { startTransition } from 'react';

// Mark search results update as non-urgent
// Input stays responsive; results update when idle
const handleInput = (e) => {
  setInputValue(e.target.value); // urgent — renders immediately
  startTransition(() => {
    setSearchResults(search(e.target.value)); // deferred
  });
};

2. useDeferredValue — defers a value update until the browser is idle; downstream components that use the deferred value re-render lazily.

3. Virtualize long lists — react-virtual, @tanstack/virtual. Rendering 1000 list items causes a massive layout. Render only what's in the viewport.

4. Memoization — React.memo, useMemo, useCallback to skip re-rendering subtrees that didn't change.

5. Web Workers — move expensive computation (search indexing, data transformation) off the main thread entirely.

6. scheduler.yield() — yield the main thread mid-loop to let interactions interrupt long synchronous tasks.