Optimising INP for Heavy JavaScript Frameworks

[User click] → Input delay → Processing time (JS execution) → Presentation delay (render) → [Frame painted]
                                        ↑
                              Main thread blocked here

Where the time actually goes

Practical fixes

• In React, wrap non-urgent state updates in useTransition so they're interruptible — if the user interacts again while a transition is calculating, React yields to the new input immediately instead of finishing the stale update first.
• Audit third-party scripts (tag managers, chat widgets, session replay tools) for main-thread cost — running them via requestIdleCallback or offloading to a web worker (Partytown-style) removes a common and avoidable source of hydration-adjacent blocking.

async function handleFilterChange(items) {
  setLoadingState(true);

  // scheduler.yield() is experimental (Chromium origin trial) — feature-detect
  // and fall back to a macrotask yield where it isn't available.
  if ('scheduler' in window && 'yield' in window.scheduler) {
    await window.scheduler.yield();
  } else {
    await new Promise((resolve) => setTimeout(resolve, 0));
  }

  const filtered = performHeavyComputation(items);
  setFilteredItems(filtered);
}

React's useTransition in practice

import { useTransition } from 'react';

function SearchInput() {
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setInputValue(e.target.value); // high priority: update the input immediately

    startTransition(() => {
      setSearchQuery(e.target.value); // low priority: defer the heavy filtering
    });
  }
}