UseState et UseEffect avec React

Ouf, cela fait quelques mois depuis notre dernier article de blog où nous avons fait un appel API avec fetch() et Javascript ! Cette fois-ci, nous construisons un projet dans le cadre ou la technologie React. C'est très excitant et aujourd'hui, j'écrirai sur deux crochets importants dans React que vous utiliserez, useState et useEffect !

Alors, que sont useState et useEffect ? Eh bien, ce sont des fonctions spéciales du framework React qui vous permettent d'accéder ou de vous connecter aux fonctionnalités de React. State et Effect sont les crochets, et useState() et useEffect() sont les fonctions qui permettent d'utiliser ces crochets qui permettent les fonctionnalités React. React State et React Effect ne sont utilisés que dans le cadre de React, mais ce sont des outils très puissants et vous les utiliserez sans aucun doute dans votre parcours de programmation !

Commençons par React State, qu'est-ce que State et pourquoi ou comment commencerais-je à l'utiliser ? Eh bien, State est un type de données dynamique, il change avec le temps ou lorsque l'utilisateur fait quelque chose. Supposons que vous souhaitiez définir un "compte" pour un compteur, lorsque le compteur change, l'état "compte" changera avec lui. Contrairement aux accessoires lorsqu'ils sont transmis à partir d'un composant parent tel que App.js, State changera alors que les accessoires ne le peuvent pas. Ci-dessous, nous importons le hook useState dans le composant, puis nous invoquons la fonction useState dans notre fonction Example(). La syntaxe pour définir l'état est la suivante :

const [état, setState] = useState()

(useState renvoie une paire de valeurs, l'état actuel et une fonction pour le mettre à jour.)

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>    Click me
  </button>

Pour simplifier les choses, nous parlerons simplement de useEffect en termes d'utilisation pour la récupération de données ou pour extraire des données d'une API publique à l'aide de fetch() ! Le hook Effect vous permet d'effectuer des effets secondaires dans vos composants, ou essentiellement, d'exécuter du code supplémentaire après que React a mis à jour le DOM. L'effet principal de votre composant est de mettre à jour le DOM ou de modifier un élément tandis que l'effet secondaire peut être quelque chose comme faire une requête réseau ou accéder aux données d'une base de données. C'est là qu'intervient notre appel API ou la récupération de données. Nous pouvons utiliser le hook Effect dans notre composant de fonction et l'appeler afin d'extraire les données dont nous avons besoin. En remarque, useEffect est appelé à chaque fois que le composant est rendu. Nous rendrions donc notre DOM et ensuite notre useEffect serait appelé par la suite.

useEffect(() => { 
         fetch(API) 
           .then((r) => r.json()) 
              .then((data) => {
                    setState(data) }); 
}, []);

Il y a beaucoup plus à utiliserEffect, comme les effets avec et sans nettoyage, mais nous ne les passerons pas en revue aujourd'hui. Et je suis sûr qu'il y a beaucoup plus à utiliser State, mais je me contente de ne couvrir que les bases aujourd'hui. J'espère que cela vous a été utile et merci d'avoir lu, bonne chance pour la poursuite de votre voyage de programmation et portez-vous bien !