## Introduction aux Hooks
Les Hooks sont une addition à React 16.8 qui permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Ils permettent de réutiliser la logique avec état entre les composants sans changer votre hiérarchie de composants.
## Les Hooks de base
### useState
Le Hook `useState` permet d'ajouter l'état local React à des composants fonctionnels :
```jsx import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Vous avez cliqué {count} fois</p> <button onClick={() => setCount(count + 1)}> Cliquez ici </button> </div> ); } ```
### useEffect
Le Hook `useEffect` vous permet d'exécuter des effets de bord dans vos composants fonctionnels :
```jsx import React, { useState, useEffect } from 'react';
function Example() { const [count, setCount] = useState(0);
// Similaire à componentDidMount et componentDidUpdate : useEffect(() => { // Met à jour le titre du document document.title = `Vous avez cliqué ${count} fois`; });
return ( <div> <p>Vous avez cliqué {count} fois</p> <button onClick={() => setCount(count + 1)}> Cliquez ici </button> </div> ); } ```
## Hooks avancés
### useContext
Le Hook `useContext` permet de s'abonner au contexte React sans introduire de niveaux d'imbrication supplémentaires :
```jsx import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() { const theme = useContext(ThemeContext); return <button className={theme}>Je suis stylé par le thème</button>; } ```
### useReducer
Le Hook `useReducer` est une alternative à `useState`. Il est préférable lorsque vous avez une logique d'état complexe qui implique plusieurs sous-valeurs ou lorsque l'état suivant dépend de l'état précédent :
```jsx import React, { useReducer } from 'react';
function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {count: state.count - 1}; default: throw new Error(); } }
function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( <> Count: {state.count} <button onClick={() => dispatch({type: 'decrement'})}>-</button> <button onClick={() => dispatch({type: 'increment'})}>+</button> </> ); } ```
## Conclusion
Les Hooks offrent une manière plus directe de réutiliser la logique entre les composants, simplifiant ainsi votre code et permettant une meilleure organisation. Si vous n'avez pas encore commencé à les utiliser, c'est le moment idéal pour vous y mettre !