1. Qu'est-ce que le Virtual DOM et comment fonctionne-t-il ?
Le Virtual DOM est une representation JavaScript legere du DOM reel. Quand l'etat d'un composant change, React cree un nouveau Virtual DOM et le compare avec le precedent via un algorithme de diffing (reconciliation). Seules les differences sont appliquees au DOM reel (patching). Cela evite les manipulations DOM couteuses. L'algorithme compare par type d'element (si le type change, l'arbre entier est remplace) et par keys dans les listes (pour identifier quels elements ont bouge, ete ajoutes ou supprimes). Le batching regroupe plusieurs updates d'etat en un seul re-render. Le Virtual DOM n'est pas plus rapide que le DOM natif optimise manuellement, mais il offre un modele de programmation declaratif plus simple.
2. Expliquez la difference entre les composants fonctionnels et les composants de classe.
Les composants fonctionnels sont des fonctions qui recoivent des props et retournent du JSX. Depuis les hooks (React 16.8), ils peuvent gerer l'etat (useState) et les effets de bord (useEffect). Les composants de classe utilisent la syntaxe class, avec un state objet et des methodes de cycle de vie (componentDidMount, componentDidUpdate, componentWillUnmount). Les composants fonctionnels sont maintenant le standard : plus concis, pas de probleme avec this, les hooks sont composables et reutilisables. Les classes restent necessaires pour les Error Boundaries (componentDidCatch). Migration : componentDidMount = useEffect(fn, []), componentWillUnmount = useEffect return cleanup, this.state/setState = useState.
3. Comment fonctionne useState et quelles sont ses subtilites ?
useState declare une variable d'etat : const [count, setCount] = useState(0). Le setter declenche un re-render. Subtilites : le setter est asynchrone (l'etat n'est pas mis a jour immediatement apres l'appel). Pour un update base sur la valeur precedente, utiliser la forme fonctionnelle : setCount(prev => prev + 1) au lieu de setCount(count + 1) (evite les problemes de stale closure). Les objets et arrays doivent etre copies (spread) car React compare par reference. L'initializer function : useState(() => expensiveComputation()) n'est executee qu'au premier render. Plusieurs useState sont preferes a un seul objet d'etat (separation des concerns). Ne jamais muter l'etat directement.
4. Expliquez useEffect et ses dependances.
useEffect execute des effets de bord apres le render. Trois modes : sans dependances (useEffect(fn)) execute a chaque render, tableau vide (useEffect(fn, [])) execute une seule fois au montage, avec dependances (useEffect(fn, [a, b])) execute quand a ou b change. La fonction de nettoyage (return dans useEffect) s'execute avant le prochain effet et au demontage. Utilisation : appels API, subscriptions, timers, manipulation du DOM. Pieges : oublier des dependances (stale values), mettre un objet en dependance (nouvelle reference a chaque render, utiliser les valeurs primitives ou useMemo). La regle ESLint exhaustive-deps aide a detecter les dependances manquantes. Un useEffect ne devrait avoir qu'une seule responsabilite.
5. Comment passer des donnees entre composants React ?
Props (parent vers enfant) : passage direct via les attributs JSX. Les props sont en lecture seule. Callback props (enfant vers parent) : le parent passe une fonction, l'enfant l'appelle avec les donnees. Context API (donnees globales) : createContext + Provider pour fournir, useContext pour consommer. Evite le prop drilling (passer des props a travers plusieurs niveaux). Lifting state up : deplacer l'etat vers le plus proche ancetre commun des composants qui en ont besoin. State management : Redux, Zustand, Jotai pour les applications complexes. Regle : commencer simple (props), utiliser Context pour les donnees vraiment globales (theme, auth), et un state manager seulement si le Context ne suffit plus.
6. Qu'est-ce que le JSX et comment fonctionne-t-il ?
JSX (JavaScript XML) est une extension syntaxique qui ressemble au HTML mais produit des elements React. JSX est transforme en appels React.createElement() par le compilateur (Babel/SWC). Differences avec le HTML : className au lieu de class, htmlFor au lieu de for, les styles sont des objets JavaScript (style={{ color: 'red' }}), les attributs sont en camelCase (onClick, onChange). Les expressions JavaScript sont inserees entre accolades {}. Le rendu conditionnel utilise : ternaire (condition ? A : B), court-circuit (&& pour afficher si vrai), ou des variables. Les listes utilisent map() avec une key unique et stable. JSX previent les injections XSS en echappant automatiquement les valeurs.
7. Comment gerer les evenements en React ?
Les evenements React sont des SyntheticEvents : wrappers cross-browser autour des evenements natifs. Syntaxe : onClick={handleClick} (pas de parentheses, on passe la reference). Pour passer des arguments : onClick={() => handleClick(id)} ou via un attribut data. Les evenements sont automatiquement delegues a la racine (event delegation). preventDefault() pour empecher le comportement par defaut (soumission de formulaire). stopPropagation() pour arreter la propagation. Les formulaires : controlled components (value + onChange, React controle la valeur) vs uncontrolled (ref, le DOM controle). Controlled est recommande car l'etat React est la source de verite. Le hook useRef accede aux elements DOM directement quand necessaire.
8. Expliquez le cycle de vie d'un composant React avec les hooks.
Avec les hooks, le cycle de vie se gere principalement avec useEffect. Montage : le composant est ajoute au DOM, useEffect(fn, []) s'execute apres le premier render. Mise a jour : quand les props ou l'etat changent, le composant re-render, useEffect(fn, [deps]) s'execute si les dependances ont change. Demontage : le composant est retire du DOM, la fonction de nettoyage de useEffect s'execute. useLayoutEffect : comme useEffect mais synchrone, s'execute avant que le navigateur ne peigne (pour mesurer le DOM). L'ordre : render -> useLayoutEffect -> peinture -> useEffect. StrictMode en developpement double-execute les effets pour detecter les problemes de nettoyage. Chaque render est un "snapshot" avec ses propres props, state et effets.
9. Qu'est-ce que React Router et comment gerer la navigation ?
React Router (v6+) gere la navigation client-side sans rechargement de page. Composants cles : BrowserRouter (wrapper, utilise l'API History), Routes (conteneur de routes), Route (path + element), Link/NavLink (navigation sans rechargement), Outlet (rendu des routes enfants imbriquees). Routes imbriquees : Route parent contient des Route enfants, Outlet dans le parent affiche l'enfant correspondant. useNavigate : navigation programmatique (redirection apres soumission). useParams : acces aux parametres dynamiques (/users/:id). useSearchParams : gestion des query parameters. Lazy loading : React.lazy + Suspense pour charger les pages a la demande. Les loaders (v6.4+) chargent les donnees avant le rendu de la route.
10. Comment structurer un projet React pour la maintenabilite ?
Structure recommandee par fonctionnalite (feature-based) plutot que par type de fichier. Exemple : src/features/auth/ contient les composants, hooks, services et types lies a l'authentification. Dossiers communs : components/ (composants reutilisables generiques : Button, Modal, Input), hooks/ (hooks partages), lib/ ou utils/ (fonctions utilitaires), pages/ ou routes/ (composants de page), services/ ou api/ (appels API). Conventions : un composant par fichier, nommage PascalCase pour les composants, camelCase pour les hooks et utilitaires. Colocate : tests, styles et types a cote du composant concerne. Index files pour les exports propres. Limiter la profondeur des dossiers a 3-4 niveaux maximum.