Réduire l’INP : optimisation des gestionnaires d’événements
Temporisez les gestionnaires lourds, utilisez scheduler.yield() et évitez les tâches longues qui bloquent le thread principal.
Réduire l’INP : optimisation des gestionnaires d’événements est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce que l’INP ?
L’interaction jusqu’au prochain affichage (INP) mesure la latence entre une interaction de l’utilisateur (clic, pression, touche) et le moment où le navigateur affiche la réponse. Un INP supérieur à 200 ms donne une impression de lenteur.
Pourquoi les événements React peuvent être lents
Les gestionnaires d’événements React qui effectuent trop de travail de manière synchrone bloquent le thread principal. Le navigateur ne peut pas afficher la réponse tant que la tâche JS n’est pas terminée, ce qui entraîne un INP élevé.
Temporisation de la saisie
Temporisez les opérations coûteuses (appels à l’API de recherche, calculs lourds) déclenchées par les frappes au clavier. Les mises à jour de l’état React à chaque frappe ne posent aucun problème ; c’est le travail coûteux qui doit être temporisé.
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 pour les mises à jour non urgentes
Encapsulez les mises à jour d’état lentes dans startTransition pour les marquer comme non urgentes. React les diffère afin de préserver la réactivité de la saisie.
const [isPending, startTransition] = useTransition();
function handleFilter(value) {
setInputValue(value); // urgent — update input immediately
startTransition(() => {
setFilteredList(expensiveFilter(value)); // non-urgent — can be interrupted
});
}Déplacer les tâches lourdes hors du thread principal
Utilisez des Web Workers pour les tâches gourmandes en CPU (analyse de grands ensembles de données, traitement d’images). Le thread principal reste réactif pendant que le worker effectue les calculs.
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);
};Éviter les tâches longues
Les tâches longues (>50 ms) bloquent le thread principal et augmentent l’INP. Divisez-les avec setTimeout, scheduler.yield() ou 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() (API moderne)
scheduler.yield() rend le contrôle à la boucle d’événements du navigateur, ce qui permet de traiter les interactions utilisateur en attente avant de reprendre votre code.
async function longTask() {
for (const item of largeList) {
processItem(item);
if (/* every N items */) {
await scheduler.yield(); // let browser handle pending clicks/inputs
}
}
}Éviter les mises en page synchrones dans les gestionnaires
La lecture des propriétés de mise en page (offsetWidth, getBoundingClientRect()) force un recalcul synchrone de la mise en page. Regroupez les lectures avant les écritures pour éviter les recalculs incessants.
// 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 writesActions de React 19 pour un INP asynchrone
Les Actions de React 19 gèrent les mutations asynchrones sans bloquer l’interface : l’état d’attente est mis à jour indépendamment afin que la page reste 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>;
}Pièges de la délégation d’événements
React utilise une délégation d’événements synthétiques (un seul écouteur est attaché à la racine). Évitez d’attacher des centaines d’écouteurs DOM individuels dans useEffect : utilisez plutôt les événements synthétiques de React sur les éléments JSX.
Mesurer l’INP dans DevTools
Utilisez le panneau Performance de Chrome DevTools pour enregistrer une interaction et examiner les tâches longues. Recherchez les entrées « Interaction » dans la chronologie et développez-les pour trouver les évaluations de scripts qui bloquent l’exécution.
Vérification rapide
Quel hook React marque une mise à jour d’état comme non urgente afin qu’elle puisse être interrompue par des interactions utilisateur ?
Récapitulatif
Réduisez l’INP en temporisant le travail coûteux, en utilisant startTransition pour les mises à jour non urgentes, en déléguant les tâches gourmandes en CPU à des Web Workers et en divisant les tâches longues avec scheduler.yield(). Regroupez les lectures du DOM avant les écritures pour éviter les recalculs incessants de mise en page.
Questions Fréquemment Posées
La leçon « Réduire l’INP : optimisation des gestionnaires d’événements » est-elle gratuite ?
Oui — le texte complet de « Réduire l’INP : optimisation des gestionnaires d’événements » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Réduire l’INP : optimisation des gestionnaires d’événements » ?
Temporisez les gestionnaires lourds, utilisez scheduler.yield() et évitez les tâches longues qui bloquent le thread principal. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Réduire l’INP : optimisation des gestionnaires d’événements » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mesurer les indicateurs Web essentiels dans les applications React
- Analyse du bundle et stratégie de séparation du code
- Optimisation des images et des polices dans React
- Réduire l’INP : optimisation des gestionnaires d’événements