Concurrent Rendering

React 🔴 Senior

Définition

Mode de rendu ou React peut interrompre, reprendre et abandonner des rendus en cours pour prioriser les interactions utilisateur urgentes.

Analogie

Comme un serveur de restaurant qui interrompt la préparation d'une commande pour répondre a un client qui attend a la caisse.

Exemple de code

// Active automatiquement avec createRoot
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Cas d'usage

Garder l'interface réactivé pendant des rendus lourds (longues listes, calculs complexes).

Anti-pattern

Utiliser ReactDOM.render() legacy qui ne bénéficie pas du rendu concurrent.

Termes liés

#core#interview#performance

En entretien

Explique-moi ce qu'est le concurrent rendering.
C'est un mode de rendu où React peut interrompre, reprendre et abandonner des rendus en cours pour prioriser les interactions utilisateur urgentes, comme un serveur de restaurant qui interrompt la préparation d'une commande pour répondre à un client à la caisse. Ça permet de garder l'interface réactive pendant des rendus lourds comme de longues listes ou des calculs complexes.
Comment tu debuggerais une appli qui ne profite pas du rendu concurrent ?
Je vérifierais qu'elle utilise bien createRoot de react-dom/client plutôt que l'ancien ReactDOM.render() legacy, qui ne bénéficie pas du rendu concurrent. Le concurrent rendering s'active automatiquement dès qu'on passe par createRoot.
Quelle limite tu vois au rendu concurrent ?
Il ne s'active que si on est passé à createRoot ; toute base de code encore sur l'API legacy ReactDOM.render() n'en bénéficie pas du tout. C'est donc un arbitrage de migration avant d'en tirer parti.

Fiche mise à jour le 2026-09-27