0Pricing
React Academy · Lesson

Reducing INP: Event Handler Optimisation

Debounce heavy handlers, use scheduler.yield(), and avoid long tasks that block the main thread.

Reducing INP: Event Handler Optimisation is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is INP?

Interaction to Next Paint (INP) measures the latency from a user interaction (click, tap, key press) to when the browser paints the response. INP > 200ms feels sluggish.

Why React Events Can Be Slow

React event handlers that do too much work synchronously block the main thread. The browser can't paint the response until the JS task completes — causing high INP.

Debouncing Typed Input

Debounce expensive operations (search API calls, heavy computations) triggered by keystrokes. React state updates on every keystroke are fine; the expensive work should be debounced.

import { useDeferredValue, useState } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query); // defers re-render of slow parts

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} /> {/* re-renders with lower priority */}
    </>
  );
}

useTransition for Non-Urgent Updates

Wrap slow state updates in startTransition to mark them as non-urgent. React defers them, keeping the input responsive.

const [isPending, startTransition] = useTransition();

function handleFilter(value) {
  setInputValue(value); // urgent — update input immediately
  startTransition(() => {
    setFilteredList(expensiveFilter(value)); // non-urgent — can be interrupted
  });
}

Moving Heavy Work Off the Main Thread

Use Web Workers for CPU-intensive tasks (parsing large datasets, image processing). The main thread stays responsive while the worker computes.

const worker = new Worker(new URL('./heavy-worker.js', import.meta.url));

function processData(data) {
  return new Promise(resolve => {
    worker.postMessage(data);
    worker.onmessage = e => resolve(e.data);
  });
}

// In component:
const handleClick = async () => {
  const result = await processData(largeDataset); // doesn't block main thread
  setResult(result);
};

Avoiding Long Tasks

Long tasks (>50ms) block the main thread and inflate INP. Break them up with setTimeout, scheduler.yield(), or requestIdleCallback.

async function processInChunks(items) {
  const CHUNK_SIZE = 100;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0)); // yield to browser between chunks
  }
}

scheduler.yield() (Modern API)

scheduler.yield() yields control back to the browser event loop, allowing pending user interactions to be processed before resuming your code.

async function longTask() {
  for (const item of largeList) {
    processItem(item);
    if (/* every N items */) {
      await scheduler.yield(); // let browser handle pending clicks/inputs
    }
  }
}

Avoid Synchronous Layouts in Handlers

Reading layout properties (offsetWidth, getBoundingClientRect()) forces a synchronous layout recalculation. Batch reads before writes to avoid layout thrashing.

// Bad — forces layout recalculation on each iteration:
items.forEach(item => {
  const height = item.offsetHeight; // READ — forces layout
  item.style.height = height * 2 + 'px'; // WRITE — dirties layout
});

// Good — batch reads, then writes:
const heights = items.map(item => item.offsetHeight); // all reads
heights.forEach((h, i) => items[i].style.height = h * 2 + 'px'); // all writes

React 19 Actions for async INP

React 19 Actions handle async mutations without blocking the UI — the pending state updates independently so the page stays interactive.

function LikeButton({ postId }) {
  const [optimistic, setOptimistic] = useOptimistic(false);

  async function handleLike() {
    setOptimistic(true);
    await likePost(postId); // async — doesn't block
  }

  return <button onClick={handleLike}>{optimistic ? 'Liked' : 'Like'}</button>;
}

Event Delegation Pitfalls

React uses synthetic event delegation (attaches one listener to the root). Avoid attaching hundreds of individual DOM listeners in useEffect — use React's synthetic events on JSX elements instead.

Measuring INP in DevTools

Use Chrome DevTools Performance panel to record an interaction and inspect the long tasks. Look for 'Interaction' entries in the timeline and expand them to find blocking script evaluations.

Quick Check

Which React hook marks a state update as non-urgent so it can be interrupted by user interactions?

Recap

Reduce INP by debouncing expensive work, using startTransition for non-urgent updates, offloading CPU work to Web Workers, and breaking long tasks with scheduler.yield(). Batch DOM reads before writes to avoid layout thrashing.

Frequently asked questions

Is the “Reducing INP: Event Handler Optimisation” lesson free?

Yes — the full text of “Reducing INP: Event Handler Optimisation” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Reducing INP: Event Handler Optimisation”?

Debounce heavy handlers, use scheduler.yield(), and avoid long tasks that block the main thread. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Reducing INP: Event Handler Optimisation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Measuring Core Web Vitals in React Apps
  2. Bundle Analysis & Code Splitting Strategy
  3. Image & Font Optimisation in React
  4. Reducing INP: Event Handler Optimisation
← Back to React Academy