Apprenez React Hooks en 5 minutes - Tutoriel pour débutant

Parfois, 5 minutes, c'est tout ce que vous avez. Donc, dans cet article, nous allons simplement aborder deux des hooks les plus utilisés dans React: useStateet useEffect.

Si vous n'êtes pas familier avec les hooks, voici le TL; DR: à cause des hooks, il n'y a presque plus besoin de composants basés sur les classes. Les hooks vous permettent de vous «accrocher» au cycle de vie sous-jacent et aux changements d'état d'un composant au sein d'un composant fonctionnel. Plus que cela, ils améliorent souvent la lisibilité et l'organisation de vos composants.

Si vous voulez une bonne introduction à ce sujet, vous pouvez rejoindre la liste d'attente pour mon prochain cours avancé React, ou si vous êtes encore un débutant, consultez mon cours d'introduction sur React.

useState

Commençons par un composant fonctionnel.

import React from 'react'; function App() { return ( 

0

Change! ); }

Compteur à 0

Comme vous pouvez le voir, rien d'extraordinaire pour le moment. Nous rendons juste du texte et un bouton (inutile).

Importons maintenant notre tout premier hook, useStatepour apprendre à gérer l'état dans notre composant fonctionnel.

Comme ce hook est une fonction, voyons console.logce que nous en retirons .

import React, { useState } from 'react'; function App() { const value = useState(); console.log(value); return ( 

0

Change! ); }

Dans la console, nous obtenons un tableau

> [null, ƒ()] 

Et quand nous passons un argument à useState

const value = useState(true); 

Dans la console, nous obtenons un tableau avec notre valeur comme premier membre.

> [true, ƒ()] 

Maintenant, dans notre composant, nous pouvons accéder à notre état value[0]et le rendre dans

au lieu d'une valeur codée en dur.

import React, { useState } from 'react'; function App() { const value = useState(0); console.log(value); // [0, ƒ()] return ( 

{value[0]}

Change! ); }

Compteur à 0

Nous pouvons améliorer notre code en utilisant la déstructuration de tableau pour stocker la valeur du useStatehook. C'est similaire à la déstructuration d'objets, qui a tendance à être un peu plus courante. Si vous n'êtes pas très familier avec la déstructuration d'objets, voici un bref récapitulatif:

const person = { name: 'Joe', age: 42 }; // creates 2 const values from person object const { name, age } = person; console.log(name); // 'Joe' console.log(age); // 42 

La destruction de tableau est presque la même, mais utilise des crochets []au lieu d'accolades {}.

Un petit conseil: dans la déstructuration d'objet, les noms des variables créées doivent correspondre aux noms des propriétés de l'objet. Pour la déstructuration des tableaux, ce n'est pas le cas. Tout dépend de l'ordre. L'avantage ici est que nous pouvons nommer les articles comme nous le voulons.

En utilisant la déstructuration de tableau, nous pouvons obtenir la valeur initiale de state à partir du useState()hook.

import React, { useState } from 'react'; function App() { // remember, there's a second item from the array that's missing here, but we'll come right back to use it soon const [count] = useState(0); return ( 

{count}

Change! ); }

OK, nous avons la valeur d'état initiale. Comment changer la valeur de l'état avec des crochets?

N'oubliez pas que useState()hook renvoie un tableau avec 2 membres. Le deuxième membre est une fonction qui met à jour l'état!

const [count, setCount] = useState(0); 

You can, of course, call it what you wish, but by convention, it's normally called with prefix "set-", and then whatever state variable we wish to update was called, so setCount it is.

It's simple to use this function. Just call it and pass the new value you want that state to have! Or, just like this.setState in a class component, you can pass a function that receives the old state and returns the new state. Rule of thumb: do this anytime you need to rely on the past state to determine the new state.

To call it, we'll pass it to the onClick event listener. And just like with a regular setState in a class-based component, we can pass our state update to setCount.

function App() { const [count, setCount] = useState(0); return ( 

{count}

setCount(prevCount => prevCount + 1)}> Change! ); }

We can clean this up a bit, by extracting our state update to a separate function.

function App() { const [count, setCount] = useState(0); function change() { setCount(prevCount => prevCount + 1); } return ( 

{count}

Change! ); }

Great! And now when we can see the counter going up when we click the button.

Compteur à 1

Of course, useState can get a lot more complicated than this, but we've only got 5 minutes here, so let's move on to the next hook for now.

useEffect

Hooks have simplified quite a few things, compared to the way things were in class-based components. Previously we needed to know a bit about lifecycle methods and which one is best suited for which situation. useEffect hook simplified this situation. If you wish to perform side effects, network request, manual DOM manipulation, event listeners or timeouts and intervals.

useEffect hook can be imported just like useState.

import React, { useState, useEffect } from 'react'; 

To make useEffect do something, we pass it an anonymous function as an argument. Whenever React re-renders this component, it will run the function we pass to useEffect.

useEffect(() => { /* any update can happen here */ }); 

This is what the whole code might look like.

import React, { useState, useEffect } from 'react'; function App() { const [count, setCount] = useState(0); function change() { setCount(prevCount => prevCount + 1); } useEffect(() => { /* any update can happen here */ }); return ( 

{count}

Change! ); } export default App;

As an example, we will use a nice npm package that generates a random color. Feel free to write your own if you wish of course, but for this tutorial, we will just install it, npm i randomcolor, and import.

import randomcolor from 'randomcolor'; 

Let's now use our knowledge about useState hook to store some random color in the state.

const [color, setColor] = useState(''); // initial value can be an empty string 

We then can then assign the color of the counter we already have.

{count}

Now, just for the sake of it, let's change the color of the counter on every click of the Change! button. useEffect will run every time the component re-renders, and the component will re-render every time the state is changed.

So if we write the following code, it would get us stuck in an infinite loop! This is a very common gotcha with useEffect

useEffect(() => { setColor(randomcolor()); }); 

setColor updates state, which re-renders the component, which calls useEffect, which runs setColor to update the state, which re-renders the component... Yikes!

We probably only want to run this useEffect when the count variable changes.

To tell useEffect which variable(s) to keep track of, we give an array of such variables as a second argument.

useEffect(() => { setColor(randomcolor()); }, [count]); 

Compteur à 2

Cela dit essentiellement "ne lancez cet effet que si l' countétat change. De cette façon, nous pouvons changer la couleur et ne pas faire fonctionner notre effet à l'infini.

Conclusion

Il y a beaucoup plus à apprendre sur les hameçons, mais j'espère que vous avez apprécié cet aperçu rapide de 5 minutes des hameçons.

Pour en savoir plus sur React Hooks et d'autres fonctionnalités intéressantes de React, vous pouvez rejoindre la liste d'attente de mon prochain cours avancé React. Ou si vous recherchez un cours plus convivial pour les débutants, vous pouvez consulter mon cours d'introduction sur React.

Bon codage?