Gestion de l'état à l'aide de React Hooks

Introduction

React introduit un tout nouveau concept appelé React Hooks à partir de React 16.8. Même s'il s'agit d'un concept relativement nouveau, il permet aux composants fonctionnels de React d'avoir leur propre état et cycle de vie. De plus, React Hooks permet aux composants fonctionnels d'utiliser de nombreuses fonctionnalités qui n'étaient pas disponibles auparavant. Dans ce chapitre, nous allons voir comment gérer l'état d'un composant fonctionnel en utilisant React Hooks.

Qu'est-ce que React Hooks ?

Les React Hooks sont des fonctions spéciales fournies par React pour gérer une fonctionnalité spécifique à l'intérieur d'un composant fonctionnel React. React fournit une fonction Hook pour chaque fonctionnalité supportée. Par exemple, React fournit la fonction useState() pour gérer l'état dans un composant fonctionnel. Quand un composant fonctionnel React utilise React Hooks, React Hooks s'attache au composant et fournit des fonctionnalités supplémentaires.

La signature générale de UseState() Hook est la suivante : -

const [<state variable>, <state update function>] = useState(<initial value>);

Par exemple, la gestion de l'état d'un composant d'horloge à l'aide de Hooks peut être effectuée comme indiqué ci-dessous.

const [currentDateTime, setCurrentDateTime] = useState(new Date()); 
setInterval(() => setCurrentDateTime(new Date()), 1000);

Ici,

• currentDateTime − Variable utilisée pour contenir la date et l'heure actuelles (retournée par setState())
• setCurrentDate() − Function utilisée pour définir la date et l'heure actuelles (renvoyée par setState())