¿Cómo comparar oldValues ​​y newValues ​​en React Hooks useEffect?

Digamos que tengo 3 entradas: rate, sendAmount y recibenAmount. Puse esas 3 entradas en useEffect diffing params. Las reglas son:

• Si sendAmount cambió, calculo receiveAmount = sendAmount * rate
• Si recibo Monto cambiado, calculo sendAmount = receiveAmount / rate
• Si la tasa cambió, calculo receiveAmount = sendAmount * ratecuándo sendAmount > 0o calculo sendAmount = receiveAmount / ratecuándoreceiveAmount > 0

Aquí está el codesandbox https://codesandbox.io/s/pkl6vn7x6j para demostrar el problema.

¿Hay alguna manera de comparar el oldValuesy me newValuesgusta en componentDidUpdatelugar de hacer 3 controladores para este caso?

Gracias

Aquí está mi solución final con usePrevious https://codesandbox.io/s/30n01w2r06

En este caso, no puedo usar múltiples useEffectporque cada cambio conduce a la misma llamada de red. Es por eso que también uso changeCountpara rastrear el cambio también. Esto changeCounttambién es útil para realizar un seguimiento de los cambios solo locales, por lo que puedo evitar llamadas de red innecesarias debido a los cambios del servidor.

Puede escribir un gancho personalizado para proporcionarle accesorios anteriores usando useRef

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

y luego usarlo en 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])
}

Sin embargo, es más claro y probablemente mejor y más claro de leer y comprender si usa dos useEffectpor separado para cada ID de cambio que desea procesarlos por separado

En caso de que alguien esté buscando una versión de uso TypeScript Anterior:

import { useEffect, useRef } from "react";

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

Opción 1 - useComparar gancho

La comparación de un valor actual con un valor anterior es un patrón común, y justifica un enlace personalizado propio que oculta los detalles de la implementación.

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>;
};

Manifestación

Opción 2: ejecute useEffect cuando cambie el valor

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

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

Manifestación

Acabo de publicar react-delta que resuelve este tipo exacto de escenario. En mi opinión, useEffecttiene demasiadas responsabilidades.

Responsabilidades

1. Compara todos los valores en su matriz de dependencias usando Object.is
2. Ejecuta devoluciones de llamada de efecto / limpieza basadas en el resultado del n. ° 1

Rompiendo responsabilidades

react-deltarompe useEffectlas responsabilidades en varios ganchos más pequeños.

Responsabilidad # 1

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

Responsabilidad # 2

• useConditionalEffect(callback, boolean)

En mi experiencia, este enfoque es más flexible, limpio y conciso que useEffect/ useRefsoluciones.

Dado que el estado no está estrechamente acoplado con la instancia de componente en componentes funcionales, no se puede alcanzar el estado anterior useEffectsin guardarlo primero, por ejemplo, con useRef. Esto también significa que la actualización de estado posiblemente se implementó incorrectamente en un lugar incorrecto porque el estado anterior está disponible dentro de la setStatefunción de actualización.

Este es un buen caso de uso para el useReducercual proporciona una tienda similar a Redux y permite implementar el patrón respectivo. Las actualizaciones de estado se realizan explícitamente, por lo que no es necesario averiguar qué propiedad de estado se actualiza; Esto ya está claro en la acción enviada.

Aquí hay un ejemplo de cómo se vería:

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
});
...

El uso de Ref introducirá un nuevo tipo de error en la aplicación.

Veamos este caso usando lo usePreviousque alguien comentó antes:

1. prop.minTime: 5 ==> ref.current = 5 | set ref.current
2. prop.minTime: 5 ==> ref.current = 5 | el nuevo valor es igual a la corriente de referencia
3. prop.minTime: 8 ==> ref.current = 5 | el nuevo valor NO es igual a la corriente de referencia
4. prop.minTime: 5 ==> ref.current = 5 | el nuevo valor es igual a la corriente de referencia

Como podemos ver aquí, no estamos actualizando el interno refporque estamos usandouseEffect

Para una comparación de accesorios realmente simple, puede usar useEffect para verificar fácilmente si un accesorio se ha actualizado.

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

}

useEffect solo ejecutará su código si el accesorio cambia.

Saliendo de la respuesta aceptada, una solución alternativa que no requiere un enlace personalizado:

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]);
};

Aquí hay un gancho personalizado que uso que creo que es más intuitivo que usar 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)
}

Lo usarías de la useTransitionsiguiente manera.

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])

Espero que ayude.