React - useEffect : Effets de Bord
C'est lui qui va te permettre d'exécuter du code quand ton composant se monte, se met à jour ou se démonte. API calls, timers, subscriptions... tout se passe ici !
Comprendre useEffect
Qu'est-ce qu'un "Effet de Bord" ?
Un effet de bord, c'est toute action qui sort du cadre du rendu pur :
- API calls : fetch des données
- ⏰ Timers : setTimeout, setInterval
- 🔌 Subscriptions : websockets, event listeners
- 💾 localStorage : sauvegarder des données
- Analytics : tracking d'événements
- DOM manipulation : focus, scroll
Cycle de Vie Simplifié
import { useState, useEffect } from 'react'
function LifecycleWithUseEffect() {
const [count, setCount] = useState(0)
const [name, setName] = useState('')
// 🎬 Équivalent componentDidMount + componentDidUpdate
useEffect(() => {
console.log('Composant monté OU mis à jour')
document.title = `Count: ${count}`
}) // ← Pas de tableau = à chaque rendu !
// 🎬 Équivalent componentDidMount seulement
useEffect(() => {
console.log('🎬 Composant monté (UNE SEULE FOIS)')
// 💀 Cleanup = componentWillUnmount
return () => {
console.log('💀 Cleanup avant démontage')
}
}, []) // ← Tableau vide = une seule fois !
// 🎯 Effet spécifique à count
useEffect(() => {
console.log('📊 Count a changé:', count)
if (count > 10) {
alert('Count dépasse 10 !')
}
}, [count]) // ← Se déclenche quand count change !
// 👤 Effet spécifique à name
useEffect(() => {
console.log('👤 Name a changé:', name)
if (name.length > 0) {
localStorage.setItem('userName', name)
}
}, [name]) // ← Se déclenche quand name change !
return (
<div>
<h3>Count: {count}</h3>
<button onClick={() => setCount(count + 1)}>+1</button>
<input
value={name}
onChange={e => setName(e.target.value)}
placeholder="Votre nom..."
/>
</div>
)
}