25 questions d'entretien d'embauche populaires pour React

Ok, imaginez : vous entrez dans un appel Zoom, vous voyez trois visages dans la caméra et un carré noir avec l'inscription « Senior React Developer ». Le cœur est déjà quelque part dans les talons, les mains sont mouillées, et dans la tête ne tourne que « s'il vous plaît, ne demandez pas de réconciliation ».

Spoiler : demandent. Mais après cet article, vous serez prêt comme Tony Stark avant la bataille finale.

🔥 Les bases (que tout le monde oublie pour une raison quelconque)

1. Quelle est la différence entre le Real DOM et le Virtual DOM ?

Difficulté : Plus facile que de comprendre pourquoi Array.sort() fait muter un tableau

Réponse courte : Le DOM réel est ce qui est réellement affiché dans le navigateur. Lourd, lent, comme un réveil matinal. Le DOM virtuel est une copie JavaScript, légère et rapide. React les compare par diffing et ne met à jour que ce qui a changé.

Que dire à l'entretien : « Virtual DOM permet à React de corriger les mises à jour et de minimiser les opérations coûteuses avec Real DOM à l'aide de l'algorithme de réconciliation. C'est comme utiliser Git : d'abord, vous validez localement, puis vous poussez toutes les modifications à la fois. »

2. Qu'est-ce que JSX et pourquoi écrit-on du HTML en JavaScript ?

Complexité : comment expliquer à une grand-mère ce qu'est un mème

JSX est un sucre syntaxique sur React.createElement(). Sans JSX, votre code ressemblerait à JSON de l'enfer.

// Avec JSX (beau, esthétique)
<div className="hot">
  <h1>Привет, мир!</h1>
</div>

// Sans JSX (bienvenue en 2013)
React.createElement('div', {className: 'hot'},
  React.createElement('h1', null, 'Hello, world!')
)

3. Composants fonctionnels vs composants de classe — les classes ont-elles encore un sens ?

Difficulté : Comment discuter de ce qui est le mieux : une pizza ou un kebab

Les composants fonctionnels avec crochets ont gagné. Les classes sont restées comme des dinosaures dans les projets hérités. Mais lors d'un entretien, on peut vous poser des questions sur componentDidMount — soyez prêt.

4. Expliquez useState, mais de manière intéressante

const [coffee, setCoffee] = useState('no 😭');

// Après quelques lignes de code...
setCoffee('Yes! ☕');

C'est comme la boîte du chat de Schrödinger, mais vous savez toujours ce qu'il y a à l'intérieur.

5. useEffect — pourquoi avez-vous besoin d'un tableau de dépendances ?

Complexité : comprendre pourquoi votre effet est déclenché 1000 fois

Classique du genre : « J'ai un cycle infini dans useEffect, aidez-moi ! »

// ❌ Enfer sans fin
useEffect(() => {
  setCount(count + 1); // Un autre billet pour l'infini
});

// ✅ Chaos contrôlé
useEffect(() => {
  fetchData();
}, []); // Tableau vide = une fois lors du montage

Règle : Si vous utilisez une variable à l'intérieur de useEffect, ajoutez-la aux dépendances. ESLint ne jure pas pour rien.

6. useMemo vs useCallback — quelle est la différence ?

Complexité : comment choisir entre deux T-shirts identiques

• useMemo mémorise valeur (résultat des calculs)

• useCallback mémorise fonction

const expensiveValue = useMemo(() => {
  return calculatePi(1000000); // calculé une fois
}, []);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // la fonction est recréée uniquement lorsque l'identifiant est modifié

7. useRef — pas seulement pour accéder au DOM

C'est comme une poche de veste où vous pouvez mettre n'importe quoi, et cela ne provoquera pas de re-render.

const renderCount = useRef(0);

useEffect(() => {
  renderCount.current += 1; // Ne provoquera pas de re-render !
});

8. Est-il possible d'appeler des crochets de manière conditionnelle ?

NON. JAMAIS. OUBLIEZ.

// ❌ C'est le chemin vers les bogues
if (condition) {
  useState(0); // React: "Am I a joke to you?"
}

// ✅ C'est exact
const [state, setState] = useState(0);
if (condition) {
  // nous utilisons state ici
}

🎭 Concepts avancés (où la douleur commence)

9. Qu'est-ce que la réconciliation et comment fonctionne Fiber ?

Complexité : Expliquer la physique quantique à travers les mèmes

La réconciliation est le processus de comparaison du DOM virtuel. Fiber est une nouvelle implémentation de ce processus avec React 16+, qui vous permet d'interrompre et de reprendre le travail (comme une sauvegarde dans un jeu).

10. Les clés dans les listes — pourquoi l'index est-il mauvais ?

// ❌ L'intervieweur hoche la tête
{items.map((item, index) => 
  <div key={index}>{item}</div>
)}

// ✅ L'intervieweur hoche la tête avec respect
{items.map(item => 
  <div key={item.id}>{item}</div>
)}

L'utilisation d'un index comme clé peut entraîner des bogues lors de la permutation d'éléments. React pensera qu'il s'agit des mêmes éléments, mais avec de nouvelles données.

11. API de contexte — quand l'utiliser et quand utiliser Redux ?

Contexte pour les choses simples (sujet, langue, utilisateur). Si vous avez une logique d'état complexe, Redux ou Zustand vous aidera.

12. Composants d'ordre supérieur (HOC) — sont-ils vivants ?

Techniquement oui, mais leurs crochets ont été pratiquement enterrés. Il faut savoir, mais pas utiliser.

// Oldschool, mais ils peuvent demander
const withAuth = (Component) => {
  return (props) => {
    const isAuth = useAuth();
    return isAuth ? <Component {...props} /> : <Login />;
  };
};

13. Render Props — qu'est-ce que c'est et pourquoi ?

Un modèle qui a également presque disparu avec l'arrivée des crochets.

<DataProvider render={data => (
  <h1>Привет, {data.name}</h1>
)} />

⚡ Optimisation (pour que tout ne ralentisse pas)

14. React.memo — quand l'appliquer ?

Mémorisation du composant. Empêche les re-renders inutiles.

const ExpensiveComponent = React.memo(({ data }) => {
  // rendu uniquement si les données ont changé
  return <div>{/* тяжёлые вычисления */}</div>;
});

15. Lazy loading et React.Suspense

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Spinner />}>
  <HeavyComponent />
</Suspense>

L'utilisateur est heureux, le bundle est plus petit, vous êtes un bon gars.

16. Code splitting — pourquoi est-ce important ?

Personne ne veut charger 5 Mo de JavaScript lors de la première visite sur le site. Diviser pour régner.

🔄 État et gestion des données

17. Composants contrôlés vs non contrôlés

Controlled: React contrôle l'état de l'entrée (via useState)
Uncontrolled: DOM gère lui-même la valeur (via ref)

// Contrôlé (la bonne voie)
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Uncontrolled (pour les paresseux)
const inputRef = useRef();
<input ref={inputRef} />

18. Prop drilling — problème et solutions

Lorsque vous lancez des props à travers 5 niveaux de composants. Solutions : Context API, Redux, composition.

19. Lifting State Up — qu'est-ce que c'est ?

Élever l'état à un niveau supérieur afin que plusieurs composants puissent l'utiliser.

20. Redux vs MobX vs Zustand — que choisir ?

• Redux: si vous aimez les boilerplate et l'architecture stricte

• MobX: si vous aimez la magie et la réactivité

• Zustand: si vous aimez la simplicité et le minimalisme

En 2025, Zustand gagne en popularité dans les nouveaux projets.

🧪 Test

21. React Testing Library vs Enzyme

Enzyme est obsolète. Utilisez la bibliothèque de tests React.

import { render, screen } from '@testing-library/react';

test('button exists', () => {
  render(<Button />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

22. Qu'est-ce que le test de snapshot ?

Enregistrez un « instantané » du composant et comparez les modifications. Utile, mais ne surestimez pas.

🚀 React 18+ et l'avenir

23. Concurrent Rendering — qu'est-ce qui a changé ?

React peut interrompre le rendu et le reprendre. Plus de frisage de l'interface.

24. Automatic Batching — pourquoi en avez-vous besoin ?

React 18 met à jour automatiquement toutes les mises à jour d'état, même dans les promesses et les délais d'attente.

25. useTransition et useDeferredValue — à quoi ça sert ?

Permet de marquer les mises à jour comme non urgentes, en donnant la priorité aux plus importantes.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // Ne bloque pas la saisie de l'utilisateur
});

🎓 Prêt pour l'entretien ? Et à la pratique réelle ?

Apprendre la théorie, c'est comme lire les instructions d'IKEA. La vraie compétence vient lorsque vous assemblez des meubles (écrivez du code) de vos propres mains.

C'est pour cela que nous avons créé Kodik — une application où vous pouvez non seulement lire sur React, mais aussi vous entraîner immédiatement. Chaque leçon est un mini-projet qui peut être réalisé directement dans le navigateur. De useState aux applications prêtes à la production.

L'astuce est que la théorie est immédiatement consolidée par la pratique. Pas besoin de basculer entre les onglets, de chercher où exécuter le code, de configurer l'environnement. Ouvrez Kodik et commencez à coder.

Et nous avons aussi Chaîne Telegram, où des publications utiles sont publiées chaque jour : analyses de concepts, mèmes de programmation, postes vacants et astuces de vie. C'est comme un entraînement cérébral quotidien : vous faites défiler le ruban et vous vous entraînez.

Idéal pour réviser dans le métro, avant de se coucher ou pendant la pause déjeuner. La programmation doit être pratique !

Rappelez-vous: lors d'un entretien, il est important non seulement de connaître les réponses, mais aussi de savoir raisonner. Si vous ne savez pas, dites-le, mais montrez comment vous chercheriez la réponse. Les recruteurs apprécient l'honnêteté et la capacité d'apprendre plus que la connaissance de toutes les API par cœur.

Bonne chance pour les entretiens ! Que vos composants soient toujours re-rendus efficacement et que les bugs soient trouvés avant la production 🚀