JSX.Element, ReactNode, ReactElement : quand utiliser quoi en TypeScript ?

JSX.Element vs ReactNode vs ReactElement : La bataille des types que vous devez absolument gagner

Bonjour, collègue ! Si tu codes en React avec TypeScript, tu as sûrement déjà rencontré une situation où le compilateur se plaint des types de valeurs de retour. "Expected JSX.Element, got ReactNode" — une erreur familière ? Ou peut-être as-tu vu ReactElement dans des génériques en te demandant : "Mais quelle est la différence ?"

Indice : ce ne sont pas simplement des termes académiques. Le bon choix de type peut accélérer ton code, prévenir des bugs et rendre les composants plus prévisibles. Aujourd'hui, nous allons décortiquer ce sujet avec des exemples concrets, pour que tu ne confondes plus jamais ces trois types. C'est parti !

Petit rappel : qu'est-ce que c'est ?

Commençons par les bases. Les trois types font partie de la même écosystème, mais avec différents niveaux d'abstraction.

ReactElement

C'est le bloc de construction de base. ReactElement est un objet avec un type, des props et une clé. Il représente un "plan" d'élément que React transformera ensuite en un véritable nœud DOM. Si tu écris React.createElement('div', null, 'Bonjour'), tu obtiens exactement un ReactElement.

import React from 'react';

const element: React.ReactElement = React.createElement('div', { className: 'box' }, 'Bonjour !');// Type : ReactElement<{ className: string }, 'div'>

Important : ReactElement est un générique. Tu peux spécifier le type des props et le type de l'élément :

type MyElement = React.ReactElement<{ name: string }, 'button'>;

JSX.Element

C'est une extension de ReactElement qui ajoute la spécificité de JSX. En substance, JSX.Element est un ReactElement<any, any>. Quand tu écris <div /> en JSX, TypeScript voit précisément JSX.Element.

const jsxElement: JSX.Element = <div>JSX.Element</div>;

La principale différence avec ReactElement est que JSX.Element n'est pas paramétrable. C'est simplement "n'importe quel élément JSX".

ReactNode

Voici le type le plus large. ReactNode inclut :

• ReactElement
• Les chaînes de caractères
• Les nombres
• Les booléens (true/false)
• null et undefined
• Les tableaux des éléments ci-dessus
• React Portal

En termes simples : ReactNode est tout ce que React peut afficher. C'est ce type qui est utilisé pour children dans les composants.

type ReactNode =   | React.ReactElement  | string  | number  | boolean  | null  | undefined  | React.ReactNode[];

Quand utiliser quoi ? Scénarios pratiques

Passons maintenant à la partie intéressante — voyons quel type choisir dans des situations réelles.

Scénario 1 : Valeur de retour d'un composant

Ton composant retourne du JSX. Quel type spécifier ?

// ❌ Mauvais : type trop généralfunction MyComponent(): ReactNode {  return <div>Bonjour</div>;}

// ✅ Bon : utiliser JSX.Elementfunction MyComponent(): JSX.Element {  return <div>Bonjour</div>;}

// ✅ Excellent : si un typage strict des props est nécessairefunction MyComponent(): React.ReactElement<{ title: string }> {  return <div>Bonjour</div>;}

Pourquoi ? Un composant retourne toujours du JSX (ou null, s'il n'affiche rien). ReactNode est trop large — il permet de retourner une chaîne, un nombre ou un tableau, ce qui peut entraîner des erreurs inattendues.

Scénario 2 : children dans un composant

Ici, ReactNode est ton meilleur ami. Les éléments enfants peuvent être n'importe quoi : une chaîne, un autre composant, null (rendu conditionnel) ou un tableau.

interface CardProps {  title: string;  children: React.ReactNode; // ✅ Correct}

function Card({ title, children }: CardProps): J