1. Comment optimiser les performances de rendu dans React ?
React.memo : evite le re-render d'un composant si ses props n'ont pas change (comparaison shallow). useMemo : memorise le résultat d'un calcul coûteux, recalcule seulement quand les dépendances changent. useCallback : memorise une référence de fonction pour éviter les re-renders des composants enfants. Virtualisation : react-window ou react-virtuoso pour les grandes listes (ne rend que les éléments visibles). Code splitting : React.lazy + Suspense pour le chargement dynamique des composants. Keys stables : ne jamais utiliser l'index comme key dans les listes dynamiques. Profiler : React DevTools Profiler pour identifier les re-renders inutiles. Attention : ne pas optimiser prematureement, mesurer d'abord.
2. Expliquez les patterns de gestion d'état avances en React.
Contexte + useReducer : alternative légère à Redux pour l'état partage. Limiter la taille des contextes pour éviter les re-renders (séparer les contextes par domaine). Redux Toolkit : Redux moderne avec createSlice, createAsyncThunk, RTK Query pour le data fetching. Zustand : store minimaliste, API simple, pas de boilerplate. Jotai/Recoil : état atomique, chaque atome est indépendant, re-renders granulaires. TanStack Query (React Query) : gestion d'état serveur (cache, revalidation, optimistic updates). Pattern recommande : TanStack Query pour l'état serveur, Zustand ou Context pour l'état client UI. Éviter de mettre l'état serveur dans Redux (duplication, stale data).
3. Comment fonctionne le Server-Side Rendering (SSR) avec React ?
Le SSR genere le HTML sur le serveur pour chaque requête. Avantages : meilleur SEO, First Contentful Paint plus rapide, contenu visible avant le chargement JS. L'hydration attache les event handlers au HTML statique cote client. Next.js simplifie le SSR avec getServerSideProps (SSR par requête) et getStaticProps (SSG au build). React Server Components (RSC) dans Next.js App Router : composants exécutés uniquement sur le serveur, zéro JS client, accès direct aux données. Streaming SSR avec Suspense : envoie le HTML progressivement, améliore le Time To First Byte. Trade-offs : complexité serveur, latence serveur, coût d'hydration. SSG préférable quand le contenu ne change pas à chaque requête.
4. Qu'est-ce que les React Server Components et comment les utiliser ?
Les RSC sont des composants qui s'exécutent uniquement sur le serveur. Pas de state, pas d'effects, pas d'event handlers. Avantages : accès direct à la base de données et au filesystem, zéro bundle JS pour ces composants, streaming automatique. Les Client Components (marques avec 'use client') gèrent l'interactivité. Architecture : les Server Components en parents, les Client Components en feuilles pour l'interactivité. Un Server Component peut passer des props serialisables à un Client Component. Un Client Component ne peut pas importer un Server Component directement (mais peut le recevoir via children). Pattern : layouts et data fetching en Server Components, formulaires et interactions en Client Components.
5. Comment gérer les formulaires complexes en React ?
Controlled components : l'état React contrôle les valeurs des champs (onChange + state). Recommande pour la plupart des cas. React Hook Form : minimal re-renders, validation performante, intégration avec Zod/Yup pour la validation de schéma. Avantages : register() pour l'enregistrement des champs, handleSubmit pour la soumission, formState pour les erreurs et l'état de soumission. Validation : schema-based avec Zod (type-safe, inférence TypeScript). Dynamic forms : useFieldArray pour les champs repetes. Optimistic UI : mettre à jour l'interface avant la confirmation serveur avec revert en cas d'erreur. Server Actions (Next.js) : soumettre les formulaires directement au serveur sans API endpoint explicite.
6. Expliquez les hooks personnalisés et leurs patterns avances.
Les custom hooks encapsulent la logique réutilisable avec les hooks React. Conventions : prefixer par use, retourner un tuple ou un objet. Patterns utiles : useDebounce (retarder une valeur), useMediaQuery (responsive), usePrevious (valeur précédente), useIntersectionObserver (lazy loading), useLocalStorage (persistence). Composition : combiner plusieurs hooks dans un hook de plus haut niveau. Hook factories : fonctions qui retournent des hooks configures. Règles : ne pas appeler de hooks conditionnellement, les hooks doivent être purs (pas d'effets de bord dans le render). useEffect cleanup : toujours retourner une fonction de nettoyage pour les subscriptions, timers, et event listeners pour éviter les memory leaks.
7. Comment implémenter l'authentification dans une application React ?
Architecture : JWT stocke dans un httpOnly cookie (plus securise que localStorage contre XSS). Le serveur set le cookie, le navigateur l'envoie automatiquement. Context d'authentification : AuthProvider wrappant l'application, exposant user, login(), logout(), isAuthenticated. Protected routes : composant HigherOrder ou layout verifiant l'authentification, redirigeant vers /login si non authentifie. Token refresh : intercepteur Axios/fetch qui rafraichit le token automatiquement avant expiration. RBAC : role-based access control avec un hook usePermission. Avec Next.js : middleware pour la protection cote serveur, getServerSideProps pour la vérification pre-render. OAuth : utiliser des bibliothèques comme NextAuth.js (Auth.js) pour l'intégration avec les providers.
8. Comment tester les composants React efficacement ?
Testing Library : philosophie "test as user" (sélectionner par rôle, texte, label, pas par implémentation). Unit tests : composants isolés avec render(), screen queries, fireEvent/userEvent. Intégration tests : plusieurs composants ensemble, tester les flux utilisateur complets. Mock : MSW (Mock Service Worker) pour intercepter les requêtes HTTP au niveau du réseau (pas de mock des modules). Async testing : waitFor et findBy pour les opérations asynchrones. Snapshot tests : utiles pour les composants statiques, fragiles pour les composants dynamiques. Custom render : wrapper avec les providers (Router, Query, Thème) pour éviter la repetition. Couverture : prioriser les chemins critiques (formulaires, navigation, états d'erreur) plutôt qu'un pourcentage arbitraire.
9. Qu'est-ce que les patterns de composition en React ?
Compound Components : composants qui fonctionnent ensemble (Tabs, Tab.List, Tab.Panel) partageant un état implicite via Context. Render Props : passer une fonction comme prop qui reçoit des données et retourne du JSX (pattern plus rare depuis les hooks). Higher-Order Components (HOC) : fonction qui prend un composant et retourne un composant enrichi (withAuth, withTheme). Moins utilise depuis les hooks. Slots pattern : props comme header, footer, sidebar pour injecter du contenu à des emplacements spécifiques. Headless components : logique sans UI (useCombobox de Downshift), l'utilisateur fournit le rendu. Le pattern moderne préfère : custom hooks pour la logique, composants composes pour l'UI.
10. Comment gérer les erreurs et le monitoring dans une application React ?
Error Boundaries : classes React avec componentDidCatch et getDerivedStateFromError. Capturent les erreurs de rendu des composants enfants et affichent une UI de fallback. Ne capturent pas : event handlers, code asynchrone, SSR, erreurs dans le boundary lui-meme. Granularité : plusieurs error boundaries a différents niveaux (page, section, composant). Error reporting : Sentry, Bugsnag ou DataDog RUM pour capturer et agreger les erreurs en production avec stack traces, contexte utilisateur, et breadcrumbs. Retry pattern : bouton "Reessayer" dans le fallback qui reset le boundary (key change). Suspense : gestion native du loading state, combinable avec error boundaries pour une UX cohérente loading/error/success.