Maîtriser les hooks React en 2024 : guide complet

Depuis leur introduction dans React 16.8, les hooks ont transformé la façon dont nous développons des applications React. Exit les classes complexes, place à un code plus lisible et maintenable.

Pourquoi les hooks ?

Les hooks résolvent plusieurs problèmes majeurs que les développeurs rencontraient avec les composants de classe :

• Réutilisation de la logique : Fini le prop drilling et les Higher-Order Components complexes
• Code plus lisible : La logique liée est regroupée au même endroit
• Moins de boilerplate : Plus besoin de this.state, this.setState, etc.

Les hooks essentiels

useState : gérer l’état local

Le hook useState permet de déclarer une variable d’état dans un composant fonctionnel :

const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: '', email: '' });

useEffect : gérer les effets de bord

useEffect remplace les méthodes de cycle de vie (componentDidMount, componentDidUpdate, etc.) :

useEffect(() => {
  // Exécuté après chaque rendu
  document.title = `Compteur: ${count}`;
  
  return () => {
    // Cleanup (optionnel)
  };
}, [count]); // Dépendances

useContext : partager des données globales

useContext simplifie l’accès au contexte React :

const theme = useContext(ThemeContext);
const { user, logout } = useContext(AuthContext);

Hooks avancés

useMemo et useCallback

Ces hooks optimisent les performances en mémorisant des valeurs ou fonctions :

// Mémorise une valeur calculée
const sortedList = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// Mémorise une fonction
const handleClick = useCallback(() => {
  console.log('Clicked:', id);
}, [id]);

useReducer : état complexe

Pour une logique d’état plus complexe, useReducer offre une approche similaire à Redux :

const [state, dispatch] = useReducer(reducer, initialState);

dispatch({ type: 'INCREMENT' });
dispatch({ type: 'SET_USER', payload: userData });

Créer vos propres hooks

La vraie puissance des hooks réside dans la création de hooks personnalisés. Exemple d’un hook pour gérer un formulaire :

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  };
  
  const reset = () => setValues(initialValues);
  
  return { values, handleChange, reset };
}

Bonnes pratiques

• Appelez les hooks uniquement au niveau supérieur (pas dans des boucles ou conditions)
• Appelez les hooks uniquement depuis des fonctions React
• Nommez vos hooks personnalisés avec le préfixe « use »
• Déclarez toutes les dépendances dans le tableau de useEffect

Conclusion

Les hooks React sont désormais incontournables. Ils permettent d’écrire un code plus propre, plus réutilisable et plus facile à tester. Prenez le temps de bien les maîtriser, votre productivité en sera décuplée.