Como comparar oldValues ​​e newValues ​​em React Hooks useEffect?

Digamos que eu tenho 3 entradas: rate, sendAmount e receiveAmount. Coloquei essas 3 entradas nos parâmetros diferentes useEffect. As regras são:

• Se sendAmount for alterado, eu calculo receiveAmount = sendAmount * rate
• Se receiveAmount mudou, eu calculo sendAmount = receiveAmount / rate
• Se a taxa for alterada, calculo receiveAmount = sendAmount * ratequando sendAmount > 0ou calculo sendAmount = receiveAmount / ratequandoreceiveAmount > 0

Aqui está a codesandbox https://codesandbox.io/s/pkl6vn7x6j para demonstrar o problema.

Existe uma maneira de comparar o oldValuese newValuescomo em componentDidUpdatevez de fazer 3 manipuladores para este caso?

obrigado

Aqui está minha solução final com usePrevious https://codesandbox.io/s/30n01w2r06

Nesse caso, não posso usar vários useEffectporque cada alteração está levando à mesma chamada de rede. É por isso que eu também uso changeCountpara acompanhar a mudança. Isso changeCounttambém é útil para rastrear alterações somente do local, para que eu possa impedir chamadas de rede desnecessárias devido a alterações do servidor.

Você pode escrever um gancho personalizado para fornecer adereços anteriores usando useRef

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

e depois use-o 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])
}

No entanto, é mais claro e provavelmente melhor e mais claro de ler e entender se você usar dois useEffectseparadamente para cada ID de mudança, deseja processá-los separadamente

Caso alguém esteja procurando uma versão de uso do 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;
};

Opção 1 - useCompare hook

Comparar um valor atual a um valor anterior é um padrão comum e justifica um gancho personalizado próprio que oculta os detalhes da implementação.

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

Demo

Opção 2 - execute useEffect quando o valor for alterado

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

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

Demo

Acabei de publicar react-delta, que resolve esse tipo exato de cenário. Na minha opinião, useEffecttem muitas responsabilidades.

Responsabilidades

1. Ele compara todos os valores em sua matriz de dependência usando Object.is
2. Ele executa retornos de chamada de efeito / limpeza com base no resultado do nº 1

Quebrando responsabilidades

react-deltadivide useEffectas responsabilidades em vários ganchos menores.

Responsabilidade # 1

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

Responsabilidade # 2

• useConditionalEffect(callback, boolean)

Na minha experiência, essa abordagem é mais flexível, limpa e concisa do que useEffect/ useRefsolutions.

Como o estado não está fortemente associado à instância do componente nos componentes funcionais, o estado anterior não pode ser alcançado useEffectsem salvá-lo primeiro, por exemplo, com useRef. Isso também significa que a atualização do estado possivelmente foi implementada incorretamente no lugar errado, porque o estado anterior está disponível na setStatefunção atualizador.

Este é um bom caso de uso para o useReducerqual fornece armazenamento semelhante ao Redux e permite implementar o respectivo padrão. As atualizações de estado são executadas explicitamente, portanto, não há necessidade de descobrir qual propriedade de estado é atualizada; isso já está claro na ação despachada.

Aqui está um exemplo de como pode ser:

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

O uso de Ref introduzirá um novo tipo de bug no aplicativo.

Vamos ver este caso usando usePreviousalguém que comentou antes:

1. prop.minTime: 5 ==> ref.current = 5 | definir ref.current
2. prop.minTime: 5 ==> ref.current = 5 | novo valor é igual a ref.current
3. prop.minTime: 8 ==> ref.current = 5 | novo valor NÃO é igual a ref.current
4. prop.minTime: 5 ==> ref.current = 5 | novo valor é igual a ref.current

Como podemos ver aqui, não estamos atualizando o interno refporque estamos usandouseEffect

Para uma comparação realmente simples de objetos propostos, você pode usar o useEffect para verificar facilmente se um objeto foi atualizado.

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

}

useEffect executará seu código somente se o suporte for alterado.

Saindo da resposta aceita, uma solução alternativa que não requer um gancho 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]);
};

Aqui está um gancho personalizado que eu acredito que é mais intuitivo do 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)
}

Você usaria da useTransitionseguinte maneira.

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 ajude.