React hooks : Comprendre les bases en 3 minutes

Dans cet article vous allez découvrir les hooks, la façon moderne d'aborder les components avec React. Ils sont la base d'une architecture clean et moderne qui vous permettra de développer des sites / web apps de grande envergure.

1 - useState : Gérer l'état de votre application

Avant les hooks, les composants fonctionnels étaient appelés "stateless component" car ils ne permettaient pas de gérer un state, il fallait absolument passer par un class component. L'un des premiers hooks le plus communément utilisé permet de résoudre ce problème.
Voilà sa signature :

const [state, setState] = useState(initialValue)

// state         --> la valeur de l'état
// setState      --> la fonction qui permet de modifier state
// initialValue  --> la valeur initiale de l'état

Le rendu du component s'exécute à chaque fois que state change. Pour modifier state avec setState, il y a deux approches.
Fournir une nouvelle valeur :

const newValue = "Nouvelle valeur pour l'état"

setState(newValue)


// state === "Nouvelle valeur pour l'état"

Ou bien changer l'état à partir de l'état précédent :

const [counter, setCounter] = useState(0)

setCounter(previousState => previousState + 1)


// previousState  --> l'état avant qu'il ne soit changé
// counter === 1

2 - useEffect

Avec les class components, on peut exécuter des callbacks quand le composant est monté et qu'il se met à jour avec componentDidMount et componentDidUpdate. En règle générale, on utilise le useEffect pour contrôler l'exécution de nos callbacks dans un component fonctionnel.
Voilà sa signature :

  useEffect(callback, [...dependencies])

//  callback      --> la fonction qui s'exécute à chaque fois qu'une des dépendances change
//  dependencies  --> un tableau comportant toutes les dépendances du callback

Si useEffect est appelé sans dépendances, le callback s'exécutera une fois lorsque le component sera rendu (permet de remplacer componentDidMount).

useEffect(() => {
  // Execute some code...
}, [])

Sinon, il s'exécutera à chaque fois qu'une dépendance change.

Un exemple concret

Ici on utilise les deux hooks vus auparavant pour faire un compteur.

    
import React, { useState, useEffect } from "react"


const MyComponent = () => {
  const [counter, setCounter] = useState(0)

  const increment = () => setCounter(oldState => oldState + 1)
  const decrement = () => setCounter(oldState => oldState - 1)

  useEffect(() => {
    console.log("La valeur de counter à changée")
  }, [counter])

  return (
    <div>
      <button onClick={increment}>+</button>
      <div>Count : {count}</div>
      <button onClick={decrement}>-</button>
    </div>
  )
}

3 - Créer son propre hook

Un custom hook est une fonction utilisant des hooks que vous pouvez créer pour éviter les répétitions dans votre code. Admettons que vous utilisiez le compteur vu au-dessus à plusieurs endroits de votre application, on peut alors refactorer notre code :

// custom-hooks/useCounter.js


const useCounter = (step = 1) => {
  const [count, setCount] = useState

  const increment = () => setCount(oldState => oldState + step)
  const decrement = () => setCount(oldState => oldState - step)

  return { count, increment, decrement }
}

--------------------------------------------------------------------------------------

// components/Counter.js


const MyComponent = () => {
  const { count, increment, decrement } = useCounter(10)

  return (
    <div>
      <button onClick={increment}>+</button>
      <div>Count : {count}</div>
      <button onClick={decrement}>-</button>
    </div>
  )
}

// Ici on à un component réutilisable qui incrémente et décremente le compte par 10.

4 - Conclusion

Il existe d'autres hooks que vous pouvez retrouver sur la documentation de React, mais cela sont les principaux. Vous pouvez maintenant écrire des composants fonctionnels et créer une architecture stable et moderne.