Comment comparer oldValues ​​et newValues ​​sur React Hooks useEffect?

Disons que j'ai 3 entrées: rate, sendAmount et receiveAmount. Je mets que 3 entrées sur useEffect des paramètres différents. Les règles sont:

• Si sendAmount a changé, je calcule receiveAmount = sendAmount * rate
• Si receiveAmount a changé, je calcule sendAmount = receiveAmount / rate
• Si le taux a changé, je calcule receiveAmount = sendAmount * ratequand sendAmount > 0ou je calcule sendAmount = receiveAmount / ratequandreceiveAmount > 0

Voici le codeandbox https://codesandbox.io/s/pkl6vn7x6j pour illustrer le problème.

Existe-t-il un moyen de comparer les oldValueset les newValuesautres au componentDidUpdatelieu de créer 3 gestionnaires pour ce cas?

Merci

Voici ma solution finale avec usePrevious https://codesandbox.io/s/30n01w2r06

Dans ce cas, je ne peux pas utiliser plusieurs useEffectcar chaque changement conduit au même appel réseau. C'est pourquoi j'utilise également changeCountpour suivre le changement. Cela est changeCountégalement utile pour suivre les modifications à partir du local uniquement, afin que je puisse éviter les appels réseau inutiles en raison des modifications du serveur.

Vous pouvez écrire un hook personnalisé pour vous fournir des accessoires précédents en utilisant useRef

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

puis utilisez-le dans useEffect

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {

         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {

         // process here
        }
    }, [receiveAmount, sendAmount])
}

Cependant, il est plus clair et probablement meilleur et plus clair à lire et à comprendre si vous en utilisez deux useEffectséparément pour chaque identifiant de modification que vous souhaitez traiter séparément

Dans le cas où quiconque recherche une version d'utilisation de TypeScript

import { useEffect, useRef } from "react";

const usePrevious = <T extends {}>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Option 1 - crochet useCompare

La comparaison d'une valeur actuelle à une valeur précédente est un modèle courant et justifie un hook personnalisé qui cache les détails de l'implémentation.

const useCompare = (val: any) => {
    const prevVal = usePrevious(val)
    return prevVal !== val
}

const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
}

const Component = (props) => {
  ...
  const hasVal1Changed = useCompare(val1)
  const hasVal2Changed = useCompare(val2);
  useEffect(() => {
    if (hasVal1Changed ) {
      console.log("val1 has changed");
    }
    if (hasVal2Changed ) {
      console.log("val2 has changed");
    }
  });

  return <div>...</div>;
};

Démo

Option 2 - Exécutez useEffect lorsque la valeur change

const Component = (props) => {
  ...
  useEffect(() => {
    console.log("val1 has changed");
  }, [val1]);
  useEffect(() => {
    console.log("val2 has changed");
  }, [val2]);

  return <div>...</div>;
};

Démo

Je viens de publier react-delta qui résout ce genre de scénario exact. À mon avis, useEffecta trop de responsabilités.

Responsabilités

1. Il compare toutes les valeurs de son tableau de dépendances en utilisant Object.is
2. Il exécute des rappels d'effet / nettoyage basés sur le résultat de # 1

Rompre les responsabilités

react-deltadivise useEffectles responsabilités en plusieurs petits crochets.

Responsabilité # 1

• usePrevious(value)
• useLatest(value)
• useDelta(value, options)
• useDeltaArray(valueArray, options)
• useDeltaObject(valueObject, options)
• some(deltaArray)
• every(deltaArray)

Responsabilité # 2

• useConditionalEffect(callback, boolean)

D'après mon expérience, cette approche est plus flexible, propre et concise que useEffect/ useRefsolutions.

Étant donné que l'état n'est pas étroitement associé à l'instance de composant dans les composants fonctionnels, l'état précédent ne peut pas être atteint useEffectsans l'enregistrer au préalable, par exemple avec useRef. Cela signifie également que la mise à jour de l'état a peut-être été mal implémentée au mauvais endroit car l'état précédent est disponible dans la setStatefonction de mise à jour.

C'est un bon cas d'utilisation pour useReducerlequel fournit un stockage de type Redux et permet d'implémenter le modèle respectif. Les mises à jour d'état sont effectuées explicitement, il n'est donc pas nécessaire de déterminer quelle propriété d'état est mise à jour; cela ressort déjà clairement de l'action expédiée.

Voici un exemple à quoi cela peut ressembler:

function reducer({ sendAmount, receiveAmount, rate }, action) {
  switch (action.type) {
    case "sendAmount":
      sendAmount = action.payload;
      return {
        sendAmount,
        receiveAmount: sendAmount * rate,
        rate
      };
    case "receiveAmount":
      receiveAmount = action.payload;
      return {
        sendAmount: receiveAmount / rate,
        receiveAmount,
        rate
      };
    case "rate":
      rate = action.payload;
      return {
        sendAmount: receiveAmount ? receiveAmount / rate : sendAmount,
        receiveAmount: sendAmount ? sendAmount * rate : receiveAmount,
        rate
      };
    default:
      throw new Error();
  }
}

function handleChange(e) {
  const { name, value } = e.target;
  dispatch({
    type: name,
    payload: value
  });
}

...
const [state, dispatch] = useReducer(reducer, {
  rate: 2,
  sendAmount: 0,
  receiveAmount: 0
});
...

L'utilisation de Ref introduira un nouveau type de bogue dans l'application.

Voyons ce cas en utilisant ce usePreviousque quelqu'un a commenté auparavant:

1. prop.minTime: 5 ==> ref.current = 5 | régler le courant de référence
2. prop.minTime: 5 ==> ref.current = 5 | la nouvelle valeur est égale au courant de référence
3. prop.minTime: 8 ==> ref.current = 5 | la nouvelle valeur n'est PAS égale au courant de référence
4. prop.minTime: 5 ==> ref.current = 5 | la nouvelle valeur est égale au courant de référence

Comme nous pouvons le voir ici, nous ne mettons pas à jour l'interne refcar nous utilisonsuseEffect

Pour une comparaison d'accessoires vraiment simple, vous pouvez utiliser useEffect pour vérifier facilement si un accessoire a été mis à jour.

const myComponent = ({ prop }) => {
  useEffect(() => {
     ---Do stuffhere----
    }
  }, [prop])

}

useEffect n'exécutera alors votre code que si le prop change.

En partant de la réponse acceptée, une solution alternative qui ne nécessite pas de hook personnalisé:

const Component = (props) => {
  const { receiveAmount, sendAmount } = props;
  const prevAmount = useRef({ receiveAmount, sendAmount }).current;
  useEffect(() => {
    if (prevAmount.receiveAmount !== receiveAmount) {
     // process here
    }
    if (prevAmount.sendAmount !== sendAmount) {
     // process here
    }
    return () => { 
      prevAmount.receiveAmount = receiveAmount;
      prevAmount.sendAmount = sendAmount;
    };
  }, [receiveAmount, sendAmount]);
};

Voici un crochet personnalisé que j'utilise et qui, à mon avis, est plus intuitif que de l'utiliser usePrevious.

import { useRef, useEffect } from 'react'

// useTransition :: Array a => (a -> Void, a) -> Void
//                              |_______|  |
//                                  |      |
//                              callback  deps
//
// The useTransition hook is similar to the useEffect hook. It requires
// a callback function and an array of dependencies. Unlike the useEffect
// hook, the callback function is only called when the dependencies change.
// Hence, it's not called when the component mounts because there is no change
// in the dependencies. The callback function is supplied the previous array of
// dependencies which it can use to perform transition-based effects.
const useTransition = (callback, deps) => {
  const func = useRef(null)

  useEffect(() => {
    func.current = callback
  }, [callback])

  const args = useRef(null)

  useEffect(() => {
    if (args.current !== null) func.current(...args.current)
    args.current = deps
  }, deps)
}

Vous utiliseriez useTransitioncomme suit.

useTransition((prevRate, prevSendAmount, prevReceiveAmount) => {
  if (sendAmount !== prevSendAmount || rate !== prevRate && sendAmount > 0) {
    const newReceiveAmount = sendAmount * rate
    // do something
  } else {
    const newSendAmount = receiveAmount / rate
    // do something
  }
}, [rate, sendAmount, receiveAmount])

J'espère que cela pourra aider.