Search Results

Phase de Updating Le composant se re-rend quand ses props ou son state changent. Avec les classes componentDidUpdate(prevProps, prevState) { // Appelé après chaque re-render if (prevProps.userId !== this.props.userId) { // Les props ont changé → réagi...

Phase de Unmounting Le composant est retiré du DOM. C'est le moment de nettoyer les effets de bord : timers, abonnements, listeners... Avec les classes class Timer extends Component { componentDidMount() { this.interval = setInterval(() => { this....

useState Permet d'ajouter un état local à un composant fonctionnel. Syntaxe const [state, setState] = useState(valeurInitiale); Exemples // Booléen const [isOpen, setIsOpen] = useState(false); // Tableau const [items, setItems] = useState([]); const addItem...

useEffect Permet d'exécuter des effets de bord (appels API, timers, listeners...) après le rendu. Syntaxe useEffect(() => { // effet return () => { /* cleanup */ }; // optionnel }, [/* dépendances */]); Les 3 modes selon le tableau de dépendances // 1. S...

useRef useRef retourne un objet { current: valeur } qui persiste entre les renders sans déclencher de re-render quand il change. C'est sa différence fondamentale avec useState. Syntaxe const ref = useRef(valeurInitiale); // Accès : ref.current Usage 1 : Accé...

useContext Permet de lire une valeur de contexte sans passer par le prop drilling. Le contexte est un état partagé accessible par tous les composants descendants. Création d'un contexte import { createContext, useContext, useState } from 'react'; // 1. Créer...

useReducer Alternative à useState pour des états complexes avec plusieurs sous-valeurs ou des transitions d'état interdépendantes. Inspiré du pattern Redux. Syntaxe const [state, dispatch] = useReducer(reducer, initialState); Exemple : gestion d'un formulair...

useMemo et useCallback Ces deux hooks servent à mémoïser des valeurs ou des fonctions pour éviter des recalculs ou recréations inutiles entre les renders. useMemo Mémoïse le résultat d'un calcul coûteux. import { useMemo } from 'react'; function Liste({ item...

Gestion des événements React utilise des événements synthétiques (SyntheticEvent) qui wrappent les événements natifs du navigateur. Syntaxe // Passer une référence de fonction (pas d'appel !) <button onClick={handleClick}>Clic</button> // Arrow function inli...

Formulaires contrôlés Dans un formulaire contrôlé, React gère l'état de chaque champ via le state. C'est le pattern recommandé. Input contrôlé simple function Formulaire() { const [nom, setNom] = useState(""); return ( <input value={nom} ...

React Router v6 — Configuration de base npm install react-router-dom Structure minimale import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; function App() { return ( <BrowserRouter> <nav> <Link to="/">Accueil</Link> ...

Hooks React Router v6 useParams — paramètres d'URL // Route : /users/:id function UserDetail() { const { id } = useParams(); // id = "42" pour /users/42 return <p>Utilisateur #{id}</p>; } useNavigate — navigation programmée import { useNavigate } from ...

Context API — État global natif Intégré à React. Idéal pour des états peu fréquemment mis à jour (thème, auth, langue). Pattern complet avec custom provider // AuthContext.jsx import { createContext, useContext, useState } from 'react'; const AuthContext = c...

Zustand — État global simple et performant Bibliothèque légère (~1kb), sans boilerplate, qui évite les re-renders inutiles. npm install zustand Création d'un store import { create } from 'zustand'; const useStore = create((set, get) => ({ // State count:...

Appels API : fetch et axios fetch natif async function getUsers() { const res = await fetch('/api/users', { method: 'GET', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); if (!res.ok) throw new Error(`HTTP...

React Query (TanStack Query) La meilleure solution pour gérer l'état serveur : cache automatique, refetch, états de chargement/erreur, pagination, optimistic updates... npm install @tanstack/react-query Configuration import { QueryClient, QueryClientProvider ...

Optimisations de performance React.memo — éviter les re-renders inutiles // L'enfant se re-rend seulement si ses props changent const ListItem = React.memo(function ListItem({ item, onDelete }) { return ( <li> {item.nom} <button onClick={() ...

Bonnes pratiques React Structure de fichiers src/ ├── components/ # Composants réutilisables │ ├── Button/ │ │ ├── Button.jsx │ │ └── Button.css │ └── Modal/ ├── pages/ # Composants de page (1 par route) ├── hooks/ ...

Custom Hooks Un custom hook est une fonction commençant par use qui encapsule de la logique réutilisable avec des hooks React. useLocalStorage function useLocalStorage(key, initialValue) { const [value, setValue] = useState(() => { try { const sto...

Higher-Order Components (HOC) Un HOC est une fonction qui prend un composant et retourne un nouveau composant enrichi. Pattern issu des classes, encore utilisé pour des wrappers génériques. // withAuth — HOC de protection de route function withAuth(WrappedCom...