📝 Exercices — R09 Custom Hooks

Créez un hook useToggle(initial) qui retourne [value, toggle, setTrue, setFalse]. Utilisez useState et useCallback. Démontrez son usage dans un composant Modal.

// Votre code ici — hook commençant par "use" import { useState, useCallback } from 'react'; function useToggle(initial = false) { // state + toggle + setTrue + setFalse }

Créez useLocalStorage(key, initialValue) qui se comporte comme useState mais persiste les valeurs dans localStorage. L'initialisation doit lire localStorage (avec try/catch).

// Votre code ici — localStorage + useState import { useState, useEffect } from 'react'; function useLocalStorage(key, initialValue) { // Lire depuis localStorage à l'init // Sauvegarder dans useEffect quand value change }

Créez useFetch(url) qui retourne { data, loading, error }. Gérez l'annulation avec AbortController au nettoyage. Testez avec l'API JSONPlaceholder.

// Votre code ici — fetch + états loading/error import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // useEffect avec AbortController }

Créez useDebounce(value, delay) qui retourne la valeur uniquement après delay ms sans changement. Utilisez setTimeout + clearTimeout dans useEffect.

// Votre code ici — debounce avec setTimeout import { useState, useEffect } from 'react'; function useDebounce(value, delay = 300) { // Retarder la mise à jour de value }

Créez usePrevious(value) qui retourne la valeur du rendu précédent. Utilisez useRef pour stocker la valeur et useEffect sans tableau de dépendances pour la mettre à jour après chaque render.

// Votre code ici — useRef + useEffect sans deps import { useRef, useEffect } from 'react'; function usePrevious(value) { const ref = useRef(undefined); // mettre à jour ref.current après chaque render return ref.current; }

Créez useKeyPress(targetKey) qui retourne true quand la touche ciblée est enfoncée. Utilisez addEventListener('keydown') et ('keyup') avec nettoyage dans useEffect.

// Votre code ici — addEventListener keydown/keyup import { useState, useEffect } from 'react'; function useKeyPress(targetKey) { const [pressed, setPressed] = useState(false); // keydown → setPressed(true), keyup → setPressed(false) // Nettoyage : removeEventListener return pressed; }

Créez useIntersection(options) qui retourne [ref, isVisible]. Utilisez l'API IntersectionObserver pour détecter si l'élément référencé est visible dans le viewport. Parfait pour le lazy loading.

// Votre code ici — IntersectionObserver import { useState, useEffect, useRef } from 'react'; function useIntersection(options = {}) { const [isVisible, setIsVisible] = useState(false); const ref = useRef(null); // IntersectionObserver sur ref.current return [ref, isVisible]; }

Créez useInterval(callback, delay) — version déclarative de setInterval. Stockez le callback dans une ref pour éviter les closures obsolètes. Si delay est null, ne déclenchez pas l'intervalle.

// Votre code ici — setInterval déclaratif import { useEffect, useRef } from 'react'; function useInterval(callback, delay) { const savedCallback = useRef(callback); // Mettre à jour la ref quand callback change // setInterval avec savedCallback.current // Nettoyer avec clearInterval }

Créez au moins 2 hooks utilitaires différents : par exemple useWindowSize (largeur/hauteur de la fenêtre avec resize listener), useClipboard (copier dans le presse-papier), ou useOnline (statut réseau).

// Votre code ici — au moins 2 hooks distincts import { useState, useEffect, useCallback } from 'react'; // Hook 1 : useWindowSize function useWindowSize() { /* ... */ } // Hook 2 : useClipboard ou useOnline function useClipboard() { /* ... */ }

Créez useSearch(items, searchFn, delay) combinant debounce, useMemo pour les résultats, useCallback pour les handlers, et useRef pour le focus. Le hook retourne { query, results, handleChange, clear, inputRef }.

// Votre code ici — hook avancé combinant plusieurs hooks import { useState, useEffect, useCallback, useRef, useMemo } from 'react'; function useSearch(items, searchFn, delay = 300) { // useState pour query // useEffect pour debounce // useMemo pour les résultats filtrés // useCallback pour les handlers // useRef pour le focus input return { query, results, handleChange, clear, inputRef }; }