Maîtrisez React.createElement en entretien : JSX, objet élément, composants et DOM expliqués clairement pour répondre vite et juste.
Most candidates who stumble on React.createElement interview questions already know JSX. That's the irony. They've written hundreds of components, they understand props, they know what a hook does — but when an interviewer asks "what does React.createElement actually return?" the answer goes fuzzy in about ten seconds. This guide fixes that with a clean 30-second answer first, then exactly as much supporting depth as you need to defend it under follow-up.
Donnez d’abord la réponse en 30 secondes, pas le cours magistral
La réponse qui inspire confiance sans donner l’impression d’être récité
Voici la réponse qui fonctionne lors d’un entretien sur React.createElement. Dites quelque chose de proche de ceci :
« JSX est un sucre syntaxique que Babel compile en appels à React.createElement avant même que React ne s’exécute. React.createElement prend un type — soit une chaîne comme 'div', soit un composant fonction ou classe — plus un objet props et les enfants éventuels, puis renvoie un objet JavaScript ordinaire appelé élément React. Cet objet décrit ce qui doit apparaître à l’écran. Le reconciler de React lit ces objets et décide quoi créer, mettre à jour ou supprimer dans le DOM réel. Donc React.createElement construit la description ; ReactDOM gère la page. »
C’est en dessous de 60 secondes. Cela nomme JSX, la transformation, l’objet renvoyé et le chemin de rendu sans s’enliser dans les détails internes. L’intervieweur a maintenant un modèle mental complet et un point de départ clair pour les questions de suivi.
Pourquoi une réponse courte peut sembler « fausse »
L’erreur structurelle que commettent la plupart des candidats consiste à traiter la question comme une invitation à raconter l’histoire de React. Ils commencent par « JSX a été introduit parce qu’écrire React.createElement à la main était trop verbeux » — et au moment où ils expliquent enfin ce que la fonction renvoie réellement, l’intervieweur a déjà formé son jugement. L’autre écueil est de passer directement à Fiber ou au virtual DOM, ce qui peut sembler impressionnant mais contourne la définition de base que la question demandait.
Le vrai objectif est de nommer trois éléments en un passage serré : JSX se compile en createElement, createElement renvoie un objet élément ordinaire, et React utilise cet objet pour mettre à jour le DOM. Tout le reste relève des questions de suivi.
Ce que cela donne en pratique
Imaginez un moment d’entretien simulé de 60 secondes. L’intervieweur demande : « Pouvez-vous expliquer ce que fait React.createElement ? » Le candidat répond avec le paragraphe ci-dessus — type, props, enfants, objet ordinaire, reconciler. L’intervieweur relance : « Donc JSX est un composant ? »
Le candidat ne vacille pas : « Non — JSX est une syntaxe. Elle se compile en un appel à createElement. Un composant est la fonction ou la classe que JSX peut référencer comme argument de type, mais ce sont des couches différentes. »
Cette réponse de suivi prend cinq secondes parce que la réponse initiale a déjà posé le vocabulaire. La documentation React sur la transformation JSX et la spécification des éléments React considèrent toutes deux cette distinction comme fondamentale — et les intervieweurs qui connaissent bien React aussi.
Montrez l’étape JSX vers React.createElement sans en faire une visite guidée du compilateur
JSX est le raccourci, pas ce que React comprend
La confusion la plus courante vient du fait que JSX ressemble à React : on le voit dans tous les fichiers React, il ressemble à l’UI, c’est là que vous passez le plus de temps. Mais JSX est une transformation à la compilation. Au moment où l’exécution de React démarre, chaque expression JSX a déjà été convertie en appel à React.createElement par Babel ou par le compilateur TypeScript. React ne voit jamais JSX. Il ne voit que des appels de fonction.
Cette distinction — JSX vers React.createElement — est le cœur de la réponse, et l’exprimer clairement est ce qui sépare un candidat qui utilise React d’un candidat qui le comprend.
Ce que cela donne en pratique
Prenez ce JSX :
Babel le compile en :
Le premier argument est le type — la chaîne `"button"` puisque c’est une balise HTML native. Le deuxième argument est l’objet props. Le troisième argument est l’enfant — la chaîne de texte "Submit". S’il y avait plusieurs enfants, ils apparaîtraient sous forme d’arguments supplémentaires ou dans un tableau au sein de props.children. Le Babel REPL vous permet de coller du JSX et de voir le résultat compilé en temps réel — c’est le moyen le plus rapide pour rendre cette transformation concrète plutôt que théorique.
Pourquoi c’est important en entretien
Si vous savez tracer cette transformation proprement, vous cessez de parler comme quelqu’un qui a mémorisé une définition et vous commencez à parler comme quelqu’un qui comprend le flux. Les questions de suivi de l’intervieweur — « et si le type est un composant ? » ou « où vont les enfants ? » — trouvent toutes leur réponse dans le même modèle mental que vous venez de démontrer. Vous n’avez pas besoin de mémoriser de nouvelles réponses ; il suffit d’étendre le même schéma.
Décrivez l’objet élément React avant de l’appeler autrement
Le modèle mental en objet ordinaire que les intervieweurs testent vraiment
React.createElement renvoie un objet élément React — un objet JavaScript ordinaire, pas un nœud DOM, pas une instance de composant, rien d’exotique. Cet objet a une structure prévisible : un champ `type`, un champ `props` qui inclut les enfants, un `key` et un `ref`. Quand vous faites un `console.log` d’un élément React dans une application réelle, c’est exactement ce que vous voyez.
C’est cela que les intervieweurs testent réellement lorsqu’ils posent des questions sur createElement. Ils veulent savoir si vous comprenez que React travaille sur une description de l’UI — l’objet élément — plutôt que directement sur le DOM.
Ce que cela donne en pratique
Exécutez ceci dans un sandbox React :
La sortie ressemble grosso modo à ceci :
Dans une réponse d’entretien, les champs qui comptent sont `type`, `props` et `children` (qui se trouve dans props). Le symbole `$$typeof` est un mécanisme de sécurité que React utilise pour distinguer les éléments des autres objets — utile à mentionner si l’intervieweur insiste sur les aspects internes, mais pas à mettre en avant. La documentation de React au niveau source sur les éléments décrit cette structure avec précision.
L’erreur la plus facile à commettre ici
Les candidats mélangent trois choses distinctes : l’objet élément React (un objet JS ordinaire décrivant ce qu’il faut rendre), l’élément DOM (un nœud du navigateur qui existe après le rendu de React), et l’instance de composant (ce que React crée en interne lorsqu’il traite un composant de classe). Ce sont trois couches séparées. Dire « createElement renvoie un élément DOM » est faux. Dire « createElement renvoie un composant » est tout aussi faux. La réponse sûre est toujours : cela renvoie un objet ordinaire qui décrit ce qui doit être rendu.
Tracez la ligne entre élément React, composant React et élément DOM
Pourquoi cette confusion persiste
Quand vous écrivez `<MyButton onClick={fn} />`, vous voyez simultanément une syntaxe JSX, une référence à un composant et la production d’un élément — le tout sur une seule ligne. Ces couches se superposent visuellement, il est donc facile de les superposer mentalement aussi. La confusion n’est pas due à de la négligence ; elle est structurelle. Le code semble être une seule chose, mais il en représente trois.
Ce que cela donne en pratique
Exemple avec une balise native :
Exemple avec un composant fonction :
Dans les deux cas, `el` est un objet ordinaire. L’élément DOM n’existe pas encore. MyButton ne s’est pas encore exécuté. La différence entre élément React et composant React tient à ce que contient le champ `type` — une chaîne pour les balises natives, une fonction ou une classe pour les composants — et l’élément DOM est en aval de tout le processus de rendu, pas du tout dans createElement. La documentation React sur les composants et les éléments distingue explicitement ces notions.
La distinction en une phrase qui vaut la peine d’être mémorisée
Un composant est une fonction ou une classe. Un élément est l’objet ordinaire renvoyé par React.createElement. Un élément DOM est le nœud du navigateur que React finit par créer. Ce sont trois choses différentes à trois niveaux différents.
Expliquez ce qui se passe lorsque React.createElement reçoit une fonction ou une classe
La partie que la plupart des candidats survolent
Lorsque l’argument type est un composant fonction ou un composant de classe, React.createElement n’appelle pas cette fonction et n’instancie pas cette classe. Il enregistre la référence. L’objet élément qu’il renvoie a `type: MyButton` — la fonction elle-même — dans le champ type. Le reconciler de React lit cela plus tard, pendant la phase de rendu, et décide quoi en faire.
Ce que cela donne en pratique
Chemin du composant fonction :
Chemin du composant de classe :
React appelle la fonction ou instancie la classe pendant la réconciliation — pas pendant createElement. C’est pourquoi vous pouvez créer des éléments sans les monter, les passer en props ou les stocker dans l’état sans déclencher de logique de rendu.
La réponse de suivi sûre en entretien
Si l’intervieweur vous demande si les composants fonction et les composants de classe sont traités de la même manière au niveau de l’élément : oui, au niveau de createElement ils sont identiques — tous deux produisent un objet élément avec la référence du composant dans le type. La différence n’apparaît que lorsque React traite cet élément : les composants fonction sont appelés, les composants de classe sont instanciés et leur méthode `render` est appelée. Cette distinction relève du reconciler de React, pas de createElement lui-même.
Distinguez React.createElement de ReactDOM.createRoot avant de dire quelque chose d’approximatif
Deux tâches différentes que les gens fusionnent sans cesse
Ces deux API participent toutes deux à l’affichage de l’UI à l’écran, d’où la confusion des candidats. Mais elles font des choses complètement différentes. React.createElement construit une description — un objet élément ordinaire qui existe entièrement en JavaScript. ReactDOM.createRoot attache React à un vrai conteneur DOM et vous donne une racine dans laquelle rendre. L’une concerne la description ; l’autre concerne le montage.
Ce que cela donne en pratique
createElement s’exécute en premier et produit l’objet élément. createRoot s’exécute ensuite et connecte React au nœud DOM réel. root.render() prend l’objet élément et lance la réconciliation. Ces étapes sont séquentielles, et elles sont distinctes. La documentation React 18 sur createRoot couvre l’API actuelle — si vous faites référence à l’ancien `ReactDOM.render`, mettez à jour votre modèle mental, car les intervieweurs qui travaillent avec React 18 le remarqueront.
La formule qui vous évite les problèmes
« React.createElement construit l’objet élément qui décrit l’UI. ReactDOM.createRoot monte React dans un conteneur DOM. Ce sont des API différentes qui font des choses différentes — l’une est du JavaScript pur, l’autre touche au navigateur. »
Répondez aux relances que les intervieweurs lancent vraiment
JSX est il un composant ?
Non — et c’est un piège qu’il vaut mieux connaître. JSX est une syntaxe. Il se compile en React.createElement. Un composant est la fonction ou la classe que JSX peut référencer comme argument de type. Vous pouvez écrire du JSX qui renvoie une balise native (`<div>`) sans qu’aucun composant n’intervienne du tout. Confondre JSX et composants suggère que vous n’avez pas séparé les couches, précisément ce que cette ligne de questionnement cherche à tester.
Qu’est ce qu’une instance d’élément ?
Cette formulation est légèrement approximative, et les intervieweurs l’emploient parfois exprès pour voir comment vous réagissez. Un élément React est un objet ordinaire — il n’est pas instancié, il n’a pas de méthodes, il ne contient pas d’état. L’expression « instance d’élément » vise généralement à vous faire clarifier un point : savez-vous que les éléments sont des descriptions immuables, pas des objets vivants ? La réponse sûre consiste à corriger doucement : « Un élément React est un objet ordinaire, pas une instance — c’est une description de ce qu’il faut rendre. Les instances de composant sont ce que React crée en interne lorsqu’il traite les composants de classe. »
Qu’est ce qui change si l’enfant est un composant au lieu d’une balise DOM ?
Le champ type de l’objet élément passe d’une chaîne à une référence de fonction ou de classe. C’est la réponse mécanique. La conséquence comportementale est que le reconciler de React doit maintenant appeler ou instancier ce type pour obtenir la couche suivante d’éléments — il descend récursivement dans l’arborescence jusqu’à ce que tout se résolve en balises natives. C’est ainsi que React peut composer des composants : chacun renvoie d’autres éléments, et React continue de dérouler jusqu’à obtenir un arbre de chaînes qu’il peut transmettre au moteur de rendu DOM.
Ancrez la réponse pour ne pas la brouiller sous pression
L’erreur qui semble presque juste
Les deux réponses « presque justes » les plus fréquentes sont : « JSX est le composant » et « createElement renvoie un nœud DOM ». Toutes deux sont fausses d’une manière qui semble plausible si vous n’écoutez pas attentivement — ce qui est précisément la raison pour laquelle les intervieweurs insistent dessus. Si vous dites l’une ou l’autre de ces choses, la relance sera immédiate et inconfortable.
Ce que cela donne en pratique
Avant tout entretien sur React.createElement, répétez à voix haute trois phrases :
- Phrase sur JSX : « JSX est un sucre syntaxique — Babel le compile en React.createElement avant l’exécution de React. »
- Phrase sur l’objet élément : « React.createElement renvoie un objet JavaScript ordinaire avec type, props et children — pas un nœud DOM. »
- Phrase sur le rendu : « Le reconciler de React lit ces objets et ReactDOM gère les mises à jour du DOM réel. »
Répétez ces trois phrases à la suite jusqu’à ce qu’elles sortent sans hésitation. C’est la réponse complète. Tout le reste de ce guide sert d’armement pour les questions de suivi.
Comment vérifier votre réponse en dix secondes
Après vous être entraîné, posez-vous quatre questions : Ai-je présenté JSX comme une syntaxe, pas comme un élément d’exécution ? Ai-je dit que createElement renvoie un objet ordinaire, pas un nœud DOM ? Ai-je bien séparé le composant (fonction ou classe) de l’élément (l’objet) ? Ai-je attribué la manipulation du DOM à ReactDOM, pas à createElement ? Si vous pouvez répondre oui aux quatre, la réponse est sûre en entretien. Si l’une de ces distinctions s’est brouillée pendant que vous parliez, c’est celle qu’il faut travailler.
FAQ
Q : Qu’est-ce que React.createElement en termes simples, et comment l’expliquer en moins de 30 secondes en entretien ?
React.createElement est une fonction qui prend un type (un nom de balise ou un composant), un objet props et des enfants, puis renvoie un objet JavaScript ordinaire décrivant ce qui doit apparaître à l’écran. En entretien : « JSX se compile en React.createElement, qui renvoie un objet ordinaire — l’élément — que React utilise pour déterminer quoi rendre dans le DOM. »
Q : Lorsque JSX est compilé, que produit exactement React.createElement ?
Il produit un objet JavaScript ordinaire avec, au minimum, un champ `type`, un champ `props` (qui inclut les enfants), un `key` et un `ref`. On appelle parfois cet objet un élément React. Ce n’est ni un nœud DOM ni une instance de composant — c’est une description légère de ce qui doit être affiché à l’écran.
Q : Quelle est la différence entre un élément React, un composant React et un élément DOM ?
Un composant React est une fonction ou une classe qui renvoie des éléments. Un élément React est l’objet ordinaire que renvoie React.createElement — une description de ce qu’il faut rendre. Un élément DOM est le nœud réel du navigateur qui existe après que React a traité ces descriptions et les a appliquées à la page. Trois couches différentes, trois choses différentes.
Q : Que se passe-t-il lorsque React.createElement reçoit un composant fonction par rapport à un composant de classe ?
Dans les deux cas, createElement enregistre la référence dans le champ `type` de l’élément et renvoie l’objet élément — il n’appelle pas la fonction et n’instancie pas la classe. Le reconciler de React le fait plus tard pendant la phase de rendu : les composants fonction sont appelés, les composants de classe sont instanciés et leur méthode `render` est invoquée.
Q : Pourquoi faut-il comprendre React.createElement si j’écris surtout du JSX ?
Parce que chaque expression JSX que vous écrivez est en réalité un React.createElement déguisé. Quand quelque chose casse — un avertissement sur les clés, un re-render inattendu, une prop qui n’est pas arrivée — le modèle mental utile au débogage est celui où vous pouvez visualiser à quoi ressemble l’appel createElement et ce que contient l’objet élément. Une maîtrise du JSX sans compréhension de createElement, c’est une maîtrise sans fondation.
Q : Quelles questions de suivi les intervieweurs posent-ils généralement après la définition de base ?
Les suivis les plus fréquents : « JSX est-il un composant ? » (non — c’est une syntaxe), « À quoi ressemble l’objet renvoyé ? » (type, props, children), « Quelle est la différence entre un élément et un composant ? » (objet vs fonction/classe), et « Que fait ReactDOM.createRoot de différent ? » (il monte React dans le DOM, il ne construit pas d’éléments). Connaître ces quatre points couvre la grande majorité des questions de suivi sur React.createElement.
Q : Comment éviter l’erreur courante qui consiste à dire que JSX ou un composant est la même chose qu’un élément ?
Gardez le modèle à trois couches actif : syntaxe (JSX), description (objet élément), nœud du navigateur (élément DOM). Quand vous êtes sur le point de dire « JSX est » ou « un composant est », faites une pause et demandez-vous de quelle couche vous parlez réellement. JSX est une syntaxe de compilation. Un composant est une fonction ou une classe. Un élément est l’objet ordinaire renvoyé par createElement. Si ces trois définitions sont nettes, la confusion ne se produit pas.
Comment Verve AI peut vous aider à préparer votre entretien sur React.createElement
La partie la plus difficile d’un entretien sur React.createElement n’est pas de connaître la définition — c’est de la restituer proprement sous la pression du direct, sans brouiller les couches. C’est une compétence de performance, pas une compétence de mémorisation, et elle ne se développe qu’avec de la répétition face à de vraies questions de suivi.
Verve AI Interview Copilot est conçu précisément pour combler cet écart. Il écoute en temps réel pendant que vous développez votre réponse et réagit à ce que vous avez réellement dit — pas à une invite générique. Si vous confondez élément et composant dans votre réponse, Verve AI Interview Copilot le détecte. Si votre explication de JSX dérive vers l’exécution au runtime, la question de suivi qu’il génère reflète cette erreur précise. Verve AI Interview Copilot reste invisible pendant vos entraînements, pour que la friction de l’exercice reste faible et que le retour soit précis. Pour un concept comme React.createElement — où la réponse est courte mais où l’arbre de suivi est vaste — ce type d’entraînement réactif est ce qui comble l’écart entre connaître le sujet et donner l’impression de le maîtriser.
Conclusion
Vous n’avez pas besoin de parler comme un ingénieur du runtime React pour réussir un entretien sur React.createElement. Vous devez parler avec assez de précision pour distinguer quatre choses sans vaciller : JSX est une syntaxe de compilation, React.createElement renvoie un objet élément ordinaire, un composant est la fonction ou la classe que cet objet peut référencer, et l’élément DOM n’existe qu’après le rendu de React. C’est toute la réponse. Tout ce qui figure dans ce guide est soit la réponse elle-même, soit des munitions pour les questions de suivi.
Répétez maintenant à voix haute la version en trois lignes — ligne JSX, ligne objet élément, ligne rendu — puis testez-la avec les questions de suivi de la section 7. Si vous pouvez répondre à « JSX est-il un composant ? » et « À quoi ressemble l’objet élément ? » sans marquer de pause, vous êtes prêt.
Verve AI
Archives