Hooks React : useState, useEffect, useMemo, useCallback — le guide sans zones grises

Les hooks React sont la pierre angulaire du développement React moderne depuis 2019. Mais useEffect reste l’un des concepts les plus mal compris — et les plus mal utilisés — par les développeurs juniors et intermédiaires. Ce guide couvre les hooks essentiels avec des cas d’usage concrets, les pièges courants, et les règles qui clarifient quand utiliser quoi.

useState — la base

const [count, setCount] = useState(0)
const [user, setUser] = useState(null)

// Mise à jour basée sur l'état précédent — toujours utiliser le form fonctionnel
setCount(prev => prev + 1) // ✅ correct
setCount(count + 1)        // ⚠️ peut causer des bugs si plusieurs updates dans le même cycle

Règle : quand la nouvelle valeur dépend de l’ancienne, utilisez toujours la forme fonctionnelle setState(prev => ...).

useEffect — démystifié

useEffect exécute du code après le rendu. Le tableau de dépendances contrôle quand :

// S'exécute après chaque rendu
useEffect(() => { ... })

// S'exécute une seule fois au montage
useEffect(() => { ... }, [])

// S'exécute quand userId change
useEffect(() => {
  fetchUser(userId)
}, [userId])

// Avec cleanup — s'exécute avant le prochain effet et au démontage
useEffect(() => {
  const timer = setInterval(() => tick(), 1000)
  return () => clearInterval(timer) // cleanup
}, [])

Les erreurs classiques avec useEffect

• Dépendances manquantes : omettre une dépendance du tableau pour « éviter des re-renders » est une bombe à retardement — le lint rule exhaustive-deps existe pour ça
• Boucle infinie : mettre un objet ou tableau créé dans le render comme dépendance → la référence change à chaque render → useEffect se relance
• Race condition : deux requêtes async en flight en même temps — la première peut résoudre après la seconde

La règle des données fetching

En 2026, pour fetcher des données, utilisez React Query (TanStack Query) ou SWR plutôt que useEffect + fetch brut. Ces librairies gèrent le cache, les race conditions, le loading/error state, et le refetch automatiquement.

useMemo et useCallback — quand les utiliser (et ne pas les utiliser)

Ces deux hooks mémoïsent des valeurs pour éviter des recalculs ou re-renders. Ils sont souvent sur-utilisés.

// useMemo — mémoïse une valeur calculée
const sortedList = useMemo(
  () => items.sort((a, b) => a.price - b.price),
  [items]
)

// useCallback — mémoïse une fonction
const handleSubmit = useCallback(
  (data) => submitForm(data, userId),
  [userId]
)

Règle pratique : n’ajoutez pas useMemo/useCallback par défaut. Profilez d’abord avec React DevTools Profiler. Si vous mesurez un problème de performance, alors mémoïsez.

useRef — les deux usages

// Usage 1 : accéder au DOM
const inputRef = useRef(null)
inputRef.current?.focus()

// Usage 2 : stocker une valeur mutable sans déclencher un re-render
const timerRef = useRef(null)
timerRef.current = setInterval(...) // ne cause pas de re-render

useContext — le partage d’état simple

// Créer le context
const ThemeContext = createContext<'light' | 'dark'>('light')

// Provider dans l'arbre

  


// Consommer dans n'importe quel composant enfant
const theme = useContext(ThemeContext)

Attention : tous les composants qui consomment un context se re-rendent quand la valeur change. Pour un état fréquemment mis à jour (theme, locale = ok) — pour du state complexe ou fréquemment muté, préférez Zustand ou Redux Toolkit.

---

À lire aussi : State management React — Performances React — Tester une app React