Comment utiliser le callback `setState` sur les react hooks ?

Question

React hooks introduit useState pour définir l'état des composants. Mais comment puis-je utiliser les hooks pour remplacer le callback comme le code ci-dessous :

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

Je veux faire quelque chose après la mise à jour de l'état.

Je sais que je peux utiliser useEffect pour faire les choses supplémentaires mais je dois vérifier l'état de la valeur précédente ce qui nécessite un peu de code. Je cherche une solution simple qui peut être utilisée avec le logiciel useState crochet.

Answer 1

Vous devez utiliser useEffect pour y parvenir.

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

Answer 2

Si vous voulez mettre à jour l'état précédent, vous pouvez faire comme ceci dans les hooks :

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

setCount(previousCount => previousCount + 1);

Answer 3

Mimic setState avec useEffect , uniquement sur l'état mises à jour (pas l'état initial) :

const [state, setState] = useState({ name: "Michael" })
const isFirstRender = useRef(true)
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false // toggle flag after first render/mounting
    return;
  }
  console.log(state) // do something after state has updated
}, [state])

Crochet personnalisé useEffectUpdate

function useEffectUpdate(callback) {
  const isFirstRender = useRef(true);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false; // toggle flag after first render/mounting
      return;
    }
    callback(); // performing action after state has updated
  }, [callback]);
}

// client usage, given some state dep
const cb = useCallback(() => { console.log(state) }, [state]); // memoize callback
useEffectUpdate(cb);

Answer 4

Je pense, en utilisant useEffect n'est pas un moyen intuitif.

J'ai créé un wrapper pour cela. Dans ce hook personnalisé, vous pouvez transmettre votre callback à setState au lieu du paramètre useState paramètre.

Je viens de créer la version Typescript. Donc si vous avez besoin de l'utiliser en Javascript, il suffit d'enlever certaines notations de type du code.

Utilisation

const [state, setState] = useStateCallback(1);
setState(2, (n) => {
  console.log(n) // 2
});

Déclaration

import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';

type Callback<T> = (value?: T) => void;
type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;

function useStateCallback<T>(initialState: T | (() => T)): [T, DispatchWithCallback<SetStateAction<T>>] {
  const [state, _setState] = useState(initialState);

  const callbackRef = useRef<Callback<T>>();
  const isFirstCallbackCall = useRef<boolean>(true);

  const setState = useCallback((setStateAction: SetStateAction<T>, callback?: Callback<T>): void => {
    callbackRef.current = callback;
    _setState(setStateAction);
  }, []);

  useEffect(() => {
    if (isFirstCallbackCall.current) {
      isFirstCallbackCall.current = false;
      return;
    }
    callbackRef.current?.(state);
  }, [state]);

  return [state, setState];
}

export default useStateCallback;

Drawback

Si la fonction flèche passée fait référence à une fonction externe variable, alors elle capturera la valeur actuelle et non une valeur après la mise à jour de l'état. Dans l'exemple d'utilisation ci-dessus, console.log(état) imprimera 1 et non 2.

Answer 5

Je rencontrais le même problème, l'utilisation de useEffect dans ma configuration n'a pas fonctionné (je mets à jour l'état d'un parent à partir d'un tableau de plusieurs composants enfants et j'ai besoin de savoir quel composant a mis à jour les données).

Envelopper setState dans une promesse permet de déclencher une action arbitraire après l'achèvement :

import React, {useState} from 'react'

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

  function handleClick(){
    Promise.resolve()
      .then(() => { setCount(count => count+1)})
      .then(() => console.log(count))
  }

  return (
    <button onClick= {handleClick}> Increase counter </button>
  )
}

export default App;

La question suivante m'a mis sur la bonne voie : React met-il en lots les fonctions de mise à jour de l'état lorsqu'il utilise des crochets ?