Design Pattern React : The State Initialiser

#french #react #designpattern

Ce design pattern permet de déporter la gestion du state dans un custom hook.

On peut l'implémenter en 3 étapes simple:

Step 1 : Définition du defaultState

Soit dans une const ou directement au niveau de l'argument de la fonction

const defaultState = 0;

const useCounter = (initValue = 0) => {}

Step 2: Création du Hook Custom


const useCounter = (initValue = defaultState) => {
  const [count, setCount] = useState(initValue);

  const add = () => setCount(count + 1);

  const reset = useCallback(() => {
    setCount(initValue);
  }, [initValue]);

  return [count, add, reset];
};

Ici on utilise la mémoïsation (useCallback) et on retourne un tableau.

Step3: Utilisation du Hook Custom

Comme avec useState, on va spread le tableau de notre useCounter et y'a plus cas.

const [count, add, reset] = useCounter();