Quand utiliser le callback setState de React

Question

Lorsqu'un état d'un composant React change, la méthode de rendu est appelée. Ainsi, pour tout changement d'état, une action peut être effectuée dans le corps des méthodes de rendu. Existe-t-il un cas d'utilisation particulier pour le rappel de setState alors?

Answer 1

Callback de setState des composants fonctionnels

Toutes les réponses concernent la façon de passer une fonction de callback à la fonction setState des Composants de Classe. Mais pour un composant fonctionnel, je recommande vivement d'utiliser une fonction de crochet personnalisée :

import { useRef, useCallback, useEffect, useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
import isFunction from 'lodash.isfunction';

type StateFunctionType = Dispatch>;
export type SetStateCallbackGeneric = (
  x: S | StateFunctionType,
  cb?: (newState: S) => void
) => void;

const useStateCallback = (
  initialState: T
): [T, SetStateCallbackGeneric] => {
  const [state, setState] = useState(initialState);
  const cbRef = useRef(null);

  const setStateCallback: SetStateCallbackGeneric = useCallback(
    (newState, cb) => {
      cbRef.current = cb;
      setState(newState as any);
    },
    []
  );

  useEffect(() => {
    if (isFunction(cbRef?.current)) {
      // @ts-ignore
      cbRef?.current?.(state);
      cbRef.current = null;
    }
  }, [state]);

  return [state, setStateCallback];
};

export default useStateCallback;

~~En utilisant cette fonction de crochet, vous pouvez facilement passer une fonction de callback à la fonction setter, veuillez consulter un exemple :

const [text, setText] = useStateCallback('')

const handleFoo = (txt: string) => {
  setText(txt, () => {
    // Faites ce que vous voulez exactement APRÈS la mise à jour du texte
  })
};~~~~~~

Answer 2

Il existe un cas rare mais important pour le callback de setState.

Vous souhaitez recalculer l'état après avoir mis à jour la propriété x et votre recalcul peut mettre à jour à nouveau x. Vous ne pouvez pas simplement utiliser useEffect en fonction de x, car React le traitera comme une 'dépendance circulaire détectée'. Vous pouvez contourner React en utilisant le callback de setState. Mais assurez-vous de ne pas créer de boucle infinie.

J'ai appliqué cette solution pour 2 grands projets React.