Les articles de la srie:

1. useState
2. useEffect
3. useReducer
4. useContext
5. useCallback
6. useRef
7. useMemo
8. useLayoutEffect

Salut tous!
Cet article est le premier d'une srie de 8 consacrs aux hooks en React. Il s'agira de prsenter chacun des hooks (ou presque), leur utilit ainsi qu'un ou deux cas d'utilisation.
L'objectif est essentiellement de faciliter leur prise en main. Par consquent, ces articles s'adresse en premier lieu toutes personne ayant une connaissance basique de React.

Sur ce, en avant la musique...

C'est quoi les hooks?

Les hooks sont simplement un ensemble de fonctions permettant de reproduire les fonctionnalits offertes par les composants bass sur les classes (class-based components) dans les composants bass sur les fonctions (fonctional components). Elles sont disponibles depuis la version 16.8 de React.

Par convention, leur noms sont sous la forme useXXX. Elles sont donc facilement reconnaissables .
Les hooks les plus populaires sont useState, useEffect, useCallback, pour ne citer que ceux l.

Dans la suite de ce premier article, nous explorerons plus en dtails le hook useState.

Pourquoi utiliser les hooks?

Les hooks permettent d'exploiter pleinement les composants bass sur des fonctions. Alors la bonne question serait plutt: Pourquoi utiliser les composants bass sur des fonctions?

Pour faire simple, ils nous permettent d'crire des composants moins verbeux, plus simple lire, comprendre et maintenir.

Cependant, le but de cette article n'tant pas de vous prsenter l'utilit des composants bass sur des fonctions, j'invite les plus curieux en savoir plus en allant par ici.

A quoi sert useState?

Pour ceux qui utilisent React depuis les versions <16.8, useState est l'quivalent de this.state et this.setState. C'est le "hook d'tat" qui permet de grer un tat dans un composant bas sur une fonction.

Comment utiliser useState

Assez parl, un exemple s'impose .

Avec un composant bas sur une classe

import { Component }  from 'react'class MyComponent extends Component {  constructor(props) {      super(props)      this.state = {          count: 0      }  }  handleClick() {    this.setState({count: this.state.count + 1})  }  render() {    return (      <div>        <p>Vous avez cliqu {this.state.count} fois</p>        <button onClick={this.handleClick}>          Cliquez ici        </button>      </div>    )  }}

Equivalent avec un composant bas sur une fonction

import {useState} from 'react'const MyComponent = () => {  const [count, setCount] = useState(0)  const handleClick = () => {    setCount(count + 1)  }  return (    <div>      <p>Vous avez cliqu {this.state.count} fois</p>      <button onClick={this.handleClick}>        Cliquez ici      </button>    </div>  )}

Avouez qu'avec le hook c'est beaucoup moins verbeux .

Dcortiquons tout a!

Cration d'une variable d'tat

const [count, setCount] = useState(0)

La fonction useState prend en paramtre l'tat initial (la valeur par dfaut) et retourne un tuple contenant l'tat actuel et une fonction permettant de le modifier. Attention l'ordre est important.
Ci-dessous, la signature de la fonction useState:

(initialState) => [state, setState]

Par convention, le nom de la fonction permettant de modifier l'tat est sous la forme set<StateName> afin de facilement savoir quoi elle sert et quel tat elle modifie.

Modification d'un tat

setCount(count + 1)

Pour modifier l'tat, on appelle la fonction renvoye par useState, dans notre cas setCount, en lui passant en paramtre la nouvelle valeur attribuer l'tat.
Ci-dessous, la signature de la fonction renvoye par useState:

(newState) => void

Attention !!! Il ne faut surtout pas modifier l'tat comme ceci:

count = count + 1

Mauvais Mauvais Mauvais et... Mauvais

En mettant jour l'tat de cette manire, React ne saura pas que votre tat a chang. Il n'actualisera donc pas le rendu du composant!.

Vous pouvez utiliser autant de variable d'tat que vous le souhaitez dans un composant.

import {useState} from 'react'const MyComponent = () => {  const [count, setCount] = useState(0)  const [age, setAge] = useState(30)  const [city, setCity] = useState('Abidjan')  const [lunch, setLunch] = useState('')  ...}

Petite astuce de pro

La fonction renvoye par useState a une deuxime signature:

((prevState) => newState ) => void

Cela signifie qu'au lieu de lui passer directement le nouvel tat, vous pouvez lui donner en paramtre une fonction qui prend elle-mme en paramtre l'tat actuel et renvoie le nouvel tat.

Hum... pas clair ? Un petit exemple s'impose donc.

setCount((previousState) => previousState + 1)

Ici, notre fonction setCount reoit en paramtre la fonction (previousState) => previousState + 1. La variable previousState reprsente dans cette fonction l'tat courant. Autrement dit previousState === count. Puis, elle renvoie setCount l'tat courant incrment previousState + 1.

Cette mthode est trs utile lorsque vous avez des tats plus complexes comme des objets et que vous souhaitez seulement mettre jour une partie de l'tat.

// Dclaration de l'tatconst [person, setPerson] = useState({firstName: 'Martial', lastName: 'Anouman', age: ''})...// Mise  jour en raction  un vnementsetPerson((previousState) => {...previousState, firstName: 'Martial G.'})...console.log(person)

{age: '', firstName: 'Martial G.', lastName: 'Anouman'}

Voila, c'est tout pour le hook useState .

J'espre que cet article vous a plu et aid dans votre prise en main de ce hook.
Rendez-vous au prochain article de la srie sur le hook useEffect(en cours).

Happy coding!