# Vue d'ensemble

## Cycle de vie d'un composant React

Chaque composant React passe par trois grandes phases :

<table id="bkmrk-phasedescription-mou"> <thead><tr><th>Phase</th><th>Description</th></tr></thead> <tbody> <tr><td>**Mounting**</td><td>Le composant est créé et inséré dans le DOM</td></tr> <tr><td>**Updating**</td><td>Les props ou le state changent → re-render</td></tr> <tr><td>**Unmounting**</td><td>Le composant est retiré du DOM</td></tr> </tbody></table>

### Méthodes de classe vs Hooks

<table id="bkmrk-classe-%28legacy%29hook-"> <thead><tr><th>Classe (legacy)</th><th>Hook équivalent</th></tr></thead> <tbody> <tr><td>`constructor()`</td><td>`useState(valeurInitiale)`</td></tr> <tr><td>`componentDidMount()`</td><td>`useEffect(() => { ... }, [])`</td></tr> <tr><td>`componentDidUpdate(prevProps, prevState)`</td><td>`useEffect(() => { ... }, [dep])`</td></tr> <tr><td>`componentWillUnmount()`</td><td>`useEffect(() => { return () => { ... } }, [])`</td></tr> <tr><td>`shouldComponentUpdate()`</td><td>`React.memo` / `useMemo`</td></tr> <tr><td>`componentDidCatch()`</td><td>Error Boundary (classe uniquement)</td></tr> </tbody></table>