React Academy · Lektion

INP reduzieren: Optimierung von Event-Handlern

Entprellen Sie aufwendige Handler, verwenden Sie scheduler.yield() und vermeiden Sie lange Tasks, die den Main Thread blockieren.

INP reduzieren: Optimierung von Event-Handlern ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist INP?

Interaction to Next Paint (INP) misst die Latenz von einer Nutzerinteraktion (Klick, Tippen, Tastendruck) bis zu dem Zeitpunkt, an dem der Browser die Reaktion rendert. Ein INP von mehr als 200 ms wirkt träge.

Warum React-Events langsam sein können

React-Event-Handler, die synchron zu viel Arbeit erledigen, blockieren den Main Thread. Der Browser kann die Reaktion erst rendern, wenn der JavaScript-Task abgeschlossen ist – dadurch steigt der INP.

Eingaben während der Eingabe entprellen

Entprellen Sie aufwendige Vorgänge (Such-API-Aufrufe, umfangreiche Berechnungen), die durch Tastatureingaben ausgelöst werden. React-State-Aktualisierungen bei jedem Tastendruck sind unproblematisch; die aufwendige Arbeit sollte entprellt werden.

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 für nicht dringende Aktualisierungen

Schließen Sie langsame State-Aktualisierungen in startTransition ein, um sie als nicht dringend zu kennzeichnen. React stellt sie zurück, sodass die Eingabe reaktionsfähig bleibt.

const [isPending, startTransition] = useTransition();

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

Aufwendige Arbeit vom Main Thread verlagern

Verwenden Sie Web Workers für CPU-intensive Aufgaben (Parsen großer Datensätze, Bildverarbeitung). Der Main Thread bleibt reaktionsfähig, während der Worker die Berechnung ausführt.

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);
};

Lange Tasks vermeiden

Lange Tasks (>50 ms) blockieren den Main Thread und erhöhen den INP. Teilen Sie sie mit setTimeout, scheduler.yield() oder requestIdleCallback auf.

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() (moderne API)

scheduler.yield() gibt die Kontrolle an die Ereignisschleife des Browsers zurück, sodass anstehende Nutzerinteraktionen verarbeitet werden können, bevor Ihr Code fortgesetzt wird.

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

Synchrone Layouts in Handlern vermeiden

Das Lesen von Layout-Eigenschaften (offsetWidth, getBoundingClientRect()) erzwingt eine synchrone Neuberechnung des Layouts. Bündeln Sie Lesevorgänge vor Schreibvorgängen, um Layout Thrashing zu vermeiden.

// 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 für asynchronen INP

React 19 Actions verarbeiten asynchrone Mutationen, ohne die UI zu blockieren – der Status der ausstehenden Operation wird unabhängig aktualisiert, sodass die Seite interaktiv bleibt.

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>;
}

Fallstricke bei der Event-Delegation

React verwendet synthetische Event-Delegation (ein Listener wird am Root-Element angebracht). Vermeiden Sie es, in useEffect Hunderte individuelle DOM-Listener anzubringen – verwenden Sie stattdessen die synthetischen Events von React auf JSX-Elementen.

INP in den DevTools messen

Verwenden Sie das Performance-Panel der Chrome DevTools, um eine Interaktion aufzuzeichnen und die langen Tasks zu untersuchen. Suchen Sie in der Zeitleiste nach „Interaction“-Einträgen und erweitern Sie sie, um blockierende Skriptausführungen zu finden.

Kurztest

Welcher React-Hook kennzeichnet eine State-Aktualisierung als nicht dringend, sodass sie durch Nutzerinteraktionen unterbrochen werden kann?

Zusammenfassung

Reduzieren Sie den INP, indem Sie aufwendige Arbeit entprellen, startTransition für nicht dringende Aktualisierungen verwenden, CPU-intensive Aufgaben an Web Workers auslagern und lange Tasks mit scheduler.yield() aufteilen. Bündeln Sie DOM-Lesevorgänge vor Schreibvorgängen, um Layout Thrashing zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „INP reduzieren: Optimierung von Event-Handlern“ kostenlos?

Ja — der vollständige Text von „INP reduzieren: Optimierung von Event-Handlern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „INP reduzieren: Optimierung von Event-Handlern“?

Entprellen Sie aufwendige Handler, verwenden Sie scheduler.yield() und vermeiden Sie lange Tasks, die den Main Thread blockieren. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „INP reduzieren: Optimierung von Event-Handlern“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Core Web Vitals in React-Apps messen
Bundle-Analyse und Strategie zur Codeaufteilung
Bild- und Font-Optimierung in React
INP reduzieren: Optimierung von Event-Handlern

← Zurück zu React Academy