Crochets de recul essentiels que tout développeur React devrait connaître / Blogs / Perficient

Si vous aimez utiliser React mais que vous trouvez la gestion de l’état délicate, vous devez connaître les hooks Recoil. Ils sont conçus pour les développeurs React qui souhaitent un moyen plus simple et plus puissant de gérer l’état. Allons-y et voyons comment cela fonctionne !

Tout d’abord, nous examinerons ce que sont les hooks dans React et leur définition de base –

Dans React, les hooks reviennent à débloquer des capacités secrètes pour vos composants fonctionnels. Ils vous permettent d’ajouter un état, d’effectuer des effets secondaires et de contrôler le cycle de vie de votre application, tout en gardant votre code propre et facile à gérer et sans classes requises !

Dans mon blog précédentnous avons présenté Recoil, couvrant les atomes et les sélecteurs et comment les créer. Considérez ce blog comme partie 2 du blog Recoil. Dans ce blog, nous examinerons les hooks Recoil et verrons comment ils peuvent rendre la gestion de l’état dans React plus facile et plus efficace.

Voyons quelle est la différence entre Réagir crochets et Crochets de recul –

Explorons les crochets Recoil. Ces hooks simples gèrent l’état global avec des atomes et des sélecteurs, facilitant ainsi la gestion de l’état dans les applications plus volumineuses. Voici une liste rapide :

utiliserRecoilState : Ceci est similaire à useState de React ; ce hook renvoie à la fois la valeur actuelle d’un atome et une fonction pour le mettre à jour. C’est idéal lorsque vous devez à la fois lire et modifier l’état.

utiliserRecoilValue : Ce hook permet de récupérer la valeur actuelle d’un atome ou d’un sélecteur sans le modifier. C’est parfait lorsque vous avez uniquement besoin de lire l’état et que vous n’avez pas besoin de déclencher des mises à jour.

utilisezSetRecoilState : Au lieu d’accéder à la fois à la valeur actuelle et à la fonction de mise à jour, ce hook fournit uniquement la fonction permettant de modifier directement la valeur d’un atome. C’est idéal pour les situations où il vous suffit de mettre à jour l’état.

utilisezResetRecoilState : Ce hook réinitialise la valeur de l’atome à son état par défaut, ce qui est utile pour effacer ou réinitialiser les données dans votre application.

Ces hooks facilitent la gestion de l’état dans Recoil, vous permettant de lire, mettre à jour ou réinitialiser les valeurs en fonction de vos besoins.

Une différenciation rapide des crochets de recul pour la lecture, l’écriture ou la mise à jour de l’état :

Voici un exemple pour montrer comment ces crochets peuvent être utilisés en action :

Exemple de codage –

Tout d’abord, nous devons créer les atomes Recoil qui représentent les états globaux, auxquels les composants accéderont et manipuleront tout au long de l’application.

import { atom } from 'recoil';

export const counterAtom = atom({
  key: 'counterAtom', // unique ID for the atom
  default: 0, // default value
});

Ce code crée un atome Recoil nommé counterAtom avec un identifiant unique (clé) et une valeur initiale de 0, permettant à l’état du compteur d’être partagé et mis à jour entre les composants à l’aide des hooks Recoil.

utiliserRecoilValue –

import React from 'react';
import { useRecoilValue } from 'recoil';
import { counterAtom } from '../src/atom';

const Counter = () => {
  const counter = useRecoilValue(counterAtom);

  return <div>Counter Value: {counter}</div>;
};

export default Counter;

Le code ci-dessus utilise le hook useRecoilValue pour lire la valeur actuelle du counterAtom et l’afficher. Ce hook fournit un accès en lecture seule à l’état de l’atome dans le composant.

utilisezSetRecoilState :

import React from 'react';
import { useSetRecoilState } from 'recoil';
import { counterAtom } from '../src/atom';

const IncrementButton = () => {
  const setCounter = useSetRecoilState(counterAtom);

  return <button onClick={() => setCounter((prev) => prev + 10)}>Increment</button>;
};

export default IncrementButton;

Ici, nous utilisons le composant IncrementButton, qui utilise useSetRecoilState pour accéder à une fonction (setCounter) qui met à jour l’état de counterAtom. Lorsque vous cliquez dessus, le bouton ajoute 10 à la valeur du compteur à l’aide de setCounter.

utiliserRecoilState :

import React from 'react';
import { useRecoilState } from 'recoil';
import { counterAtom } from '../src/atom';

const CounterWithButtons = () => {
  const [counter, setCounter] = useRecoilState(counterAtom);

  return (
    <div>
      <div>Counter Value: {counter}</div>
      <button onClick={() => setCounter(counter + 10)}>Increment</button>
      <button onClick={() => setCounter(counter - 10)}>Decrement</button>
    </div>
  );
};

export default CounterWithButtons;

Le composant CounterWithButtons utilise le hook useRecoilState pour obtenir et mettre à jour la valeur de counterAtom. Il fournit la valeur actuelle (compteur) et une fonction (setCounter) pour changer l’état.

utilisezResetRecoilState :

import React from 'react';
import { useResetRecoilState } from 'recoil';
import { counterAtom } from '../src/atom';

const ResetButton = () => {
  const resetCounter = useResetRecoilState(counterAtom);

  return <button onClick={resetCounter}>Reset Counter</button>;
};

export default ResetButton;

Le composant ResetButton utilise le hook useResetRecoilState pour obtenir une fonction (resetCounter) qui réinitialise counterAtom. Lorsque le bouton est cliqué, il réinitialise le compteur à sa valeur initiale.

Conclusion:

Recoil rend la gestion de l’état dans React fluide et agréable ! Avec des hooks comme useRecoilValue, useSetRecoilState et d’autres, il garantit que l’état de votre application reste organisé et facile à gérer. C’est comme avoir un coéquipier intelligent qui gère l’état pendant que vous vous concentrez sur le développement des fonctionnalités de l’application.

C’est tout pour aujourd’hui ! Mais restez à l’écoute pour d’autres articles sur les bibliothèques de gestion d’état qui vous seront proposées pour vous aider à faire passer vos projets au niveau supérieur. En attendant, continuez à expérimenter et bon codage !