[解決済み】React Hooks useEffectでoldValuesとnewValuesを比較する方法は？

質問

例えば、rate、sendAmount、receiveAmountの3つの入力があるとします。この3つの入力を、useEffectのdiffパラメータに設定します。ルールは以下の通りです。

• sendAmountが変更された場合、次のように計算します。 receiveAmount = sendAmount * rate
• receiveAmountが変化した場合、次のように計算します。 sendAmount = receiveAmount / rate
• レートが変化した場合、次のように計算します。 receiveAmount = sendAmount * rate 時 sendAmount > 0 または計算する sendAmount = receiveAmount / rate 時 receiveAmount > 0

以下は、codesandboxです。 https://codesandbox.io/s/pkl6vn7x6j を使用して、問題を実証しています。

を比較する方法はありますか？ oldValues と newValues のように componentDidUpdate この場合、3つのハンドラを作成する必要はないのでしょうか？

ありがとうございます

以下は、私の最終的な解決策です。 usePrevious https://codesandbox.io/s/30n01w2r06

この場合、複数の useEffect なぜなら、それぞれの変更が同じネットワーク呼び出しにつながるからです。そのため changeCount を使用して、その変更も追跡します。この changeCount また、ローカルからの変更のみを追跡するのにも便利で、サーバーからの変更のために不必要なネットワークコールを防ぐことができます。

解決方法は？

カスタムフックを書くと を使用して、以前のプロップス ユーズレフ

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

で使用し、それを 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])
}

しかし、2つのメソッドを使用すれば、より明確で、読みやすく、理解しやすいでしょう。 useEffect 各変更を別々に処理したい場合