Introduction :
Si vous êtes nouveau dans le monde de React, vous avez probablement entendu parler de cette nouvelle fonctionnalité appelée "Hooks". Ils ont été introduits dans React 16.8 et ont depuis révolutionné la manière dont nous gérons l'état et les effets dans nos applications React.
Qu'est-ce que les Hooks ? :
Les Hooks sont des fonctions spéciales qui permettent aux développeurs d'utiliser l'état et d'autres fonctionnalités de React sans avoir à écrire de classes. Cela signifie que vous pouvez désormais bénéficier de l'état local dans vos composants fonctionnels, rendant ainsi votre code plus clair, plus concis et plus facile à maintenir.
Quand utiliser les Hooks ?
- Lorsque vous avez besoin de gérer un état local
- Lorsque vous avez besoin de gérer des effets secondaires
- Lorsque vous voulez réutiliser de la logique entre les composants
- Lorsque vous voulez éviter les classes
Découverte de useState :
L'un des Hooks les plus fondamentaux est useState, qui vous permet de déclarer une variable d'état dans une fonction composante. Prenons un exemple concret :
import React, { useState } from 'react';
En important useState de cette manière, vous pouvez l'utiliser directement dans votre composant fonctionnel sans avoir à référencer React.useState à chaque fois. Cela rend le code plus lisible.
function CompteurDeClics() {
const [count, setCount] = useState(0);
return (
<div> <p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez ici
</button>
</div>
);
}
À l'intérieur du composant CompteurDeClics, nous créons une nouvelle variable d'état en utilisant le Hook useState. Ce dernier renvoie une paire de valeurs que nous pouvons nommer librement. Dans notre cas, nous l'appelons "count" car elle représente le nombre de clics sur le bouton. Nous l'initialisons à zéro en passant 0 comme unique argument à useState. Le deuxième élément retourné est une fonction qui nous permet de modifier la valeur de la variable count. Nous l'appelons donc setCount.¸
Quand on clique, nous faisons appel à la fonction setCount avec une nouvelle valeur. React rafraîchira le composant CompteurDeClicset lui passera la nouvelle valeur de count.
Peut-on utiliser plusieurs états dans un composant ?
Il est tout à fait possible d'utiliser plusieurs états dans un unique composant fonctionnel en React. Chaque appel à la fonction useState crée un nouvel état indépendant, ce qui vous permet de gérer différentes variables d'état dans un même composant.
Conclusion :
En résumé, vous devriez utiliser un hook dans React lorsque vous avez besoin de gérer un état local, des effets secondaires, de réutiliser de la logique entre les composants ou lorsque vous préférez éviter les classes. Les hooks sont un outil puissant qui peut simplifier et améliorer votre développement d'applications React.
Références :
- « React Managing State », React, https://react.dev/learn/managing-state (consulté le 14 mars 2024)
- « React interactivity: Events and state », Mdn Web docs, https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state (consulté le 14 mars 2024)
Commentaires