📝 Exercices — R08 Hooks Avancés

Créez un composant FormAutoFocus avec deux champs (nom et email). Au montage, le champ nom reçoit le focus automatiquement. Un bouton "Focus Email" déplace le focus sur l'email. Utilisez useRef pour accéder aux éléments DOM.

// Votre code ici — utilisez useRef pour accéder au DOM import { useRef, useEffect } from 'react'; function FormAutoFocus() { // Créez les refs et utilisez-les }

Créez un composant CompteurRendus qui affiche un compteur d'état et le nombre total de rendus du composant. Utilisez useRef pour compter les rendus sans déclencher de re-render supplémentaire.

// Votre code ici — useRef ne déclenche pas de re-render import { useRef, useState } from 'react'; function CompteurRendus() { // useRef pour stocker le nombre de rendus }

Créez ListeFiltre qui reçoit un tableau items et permet de filtrer par texte. Utilisez useMemo pour éviter de refiltrer la liste à chaque re-render non lié au filtre. Syntaxe : useMemo(() => calcul, [deps]).

// Votre code ici — useMemo pour mémoïser le filtrage import { useState, useMemo } from 'react'; function ListeFiltre({ items }) { const [filtre, setFiltre] = useState(''); // Mémoïser le résultat du filtre }

Créez un composant Parent avec un BoutonMemo enfant enveloppé dans React.memo. Utilisez useCallback pour mémoïser le handler passé en prop afin que l'enfant ne se re-rende pas inutilement.

// Votre code ici — useCallback pour mémoïser la fonction import { useState, useCallback, memo } from 'react'; function Parent() { const [count, setCount] = useState(0); // Mémoïser le handler avec useCallback }

Créez un composant CarteStatique qui affiche un titre et une couleur. Enveloppez-le dans React.memo pour qu'il ne se re-rende que si ses props changent. Testez avec un parent qui tick sans changer les props de la carte.

// Votre code ici — React.memo pour éviter les re-renders inutiles import { useState, memo } from 'react'; // Enveloppez CarteStatique dans memo() function CarteStatique({ titre, couleur }) { return <div>{titre}</div>; }

Refactorisez un compteur pour utiliser useReducer. Le reducer gère les actions : increment, decrement, reset et setStep. L'état contient { count, step }.

// Votre code ici — useReducer pour gérer l'état import { useReducer } from 'react'; const init = { count: 0, step: 1 }; function reducer(state, action) { // switch sur action.type } function Compteur() { const [state, dispatch] = useReducer(reducer, init); }

Créez ListeAvancee avec des items filtrables par catégorie et supprimables. Utilisez useMemo pour le filtrage et useCallback pour le handler de suppression passé à un composant Item mémoïsé.

// Votre code ici — combinaison useMemo + useCallback import { useState, useMemo, useCallback, memo } from 'react'; const Item = memo(function Item({ item, onDelete }) { return <li>{item.nom}</li>; }); function ListeAvancee() { const [items, setItems] = useState([...]); const [cat, setCat] = useState('tous'); // useMemo pour filtres, useCallback pour handleDelete }

Créez un chronomètre Chronometre avec Start, Stop et Reset. Stockez l'ID de l'intervalle dans une ref (useRef) pour pouvoir l'annuler avec clearInterval ou clearTimeout.

// Votre code ici — useRef pour l'ID du timer import { useState, useRef } from 'react'; function Chronometre() { const [temps, setTemps] = useState(0); const intervalRef = useRef(null); // stocker l'ID ici function demarrer() { /* setInterval + stocker ID */ } function arreter() { /* clearInterval */ } function reset() { /* tout remettre à 0 */ } }

Gérez un state complexe avec useReducer : { items, filtre, tri, chargement }. Actions : setItems, setFiltre, setTri, loading, deleteItem. Utilisez dispatch({ type, payload }).

// Votre code ici — useReducer pour état complexe import { useReducer } from 'react'; const initState = { items: [], filtre: 'tous', tri: 'date', chargement: false }; function reducer(state, action) { switch (action.type) { // gérer chaque action } } function App() { const [state, dispatch] = useReducer(reducer, initState); // dispatch({ type: 'loading' }), dispatch({ type: 'setItems', payload: [...] }) }

Créez BigList combinant useRef (focus input), useReducer (état), useMemo (filtrage de 1000 items), useCallback (handler), et React.memo (composant Row). Démonstration de performances React.

// Votre code ici — tous les hooks avancés ensemble import { useRef, useMemo, useCallback, memo, useReducer, useEffect } from 'react'; const Row = memo(function Row({ item }) { return <li>{item.nom}</li>; }); function BigList() { // useReducer pour le state // useRef pour le focus // useMemo pour filtrer 1000 items // useCallback pour le handler }