Come confrontare oldValues ​​e newValues ​​su React Hooks useEffect?

Diciamo che ho 3 input: rate, sendAmount e receiveAmount. Ho messo 3 input su parametri differenti di EffectEffect. Le regole sono:

• Se sendAmount è cambiato, calcolo receiveAmount = sendAmount * rate
• Se changeAmount è cambiato, calcolo sendAmount = receiveAmount / rate
• Se la tariffa è cambiata, calcolo receiveAmount = sendAmount * ratequando sendAmount > 0o calcolo sendAmount = receiveAmount / ratequandoreceiveAmount > 0

Ecco la codesandbox https://codesandbox.io/s/pkl6vn7x6j per dimostrare il problema.

C'è un modo per confrontare il oldValuese newValuessimili su componentDidUpdateinvece di creare 3 gestori per questo caso?

Grazie

Ecco la mia soluzione finale con usePrevious https://codesandbox.io/s/30n01w2r06

In questo caso, non posso usare più useEffectperché ogni modifica porta alla stessa chiamata di rete. Ecco perché uso anche changeCountper tenere traccia delle modifiche. Questo changeCountè utile anche per tenere traccia delle modifiche solo dal locale, quindi posso impedire chiamate di rete non necessarie a causa delle modifiche dal server.

Puoi scrivere un hook personalizzato per fornirti un oggetto di scena precedente usando useRef

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

e poi usalo in 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])
}

Tuttavia, è sempre più chiaro e probabilmente migliore e più chiaro leggere e comprendere se si utilizzano due useEffectseparatamente per ogni ID di modifica che si desidera elaborare separatamente

Nel caso in cui qualcuno stia cercando una versione TypeScript di uso precedente:

import { useEffect, useRef } from "react";

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

Opzione 1: uso Confronta gancio

Il confronto tra un valore corrente e un valore precedente è un modello comune e giustifica un hook personalizzato che nasconde i dettagli di implementazione.

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

dimostrazione

Opzione 2: esegui useEffect quando il valore cambia

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

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

dimostrazione

Ho appena pubblicato il delta-reazione che risolve questo esatto tipo di scenario. Secondo me, useEffectha troppe responsabilità.

responsabilità

1. Confronta tutti i valori nel suo array di dipendenze usando Object.is
2. Esegue callback di effetti / cleanup in base al risultato di # 1

Responsabilità di rottura

react-deltarompe useEffectle responsabilità in diversi piccoli uncini.

Responsabilità n. 1

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

Responsabilità # 2

• useConditionalEffect(callback, boolean)

Nella mia esperienza, questo approccio è più flessibile, pulito e conciso di useEffect/ useRefsoluzioni.

Poiché lo stato non è strettamente associato all'istanza del componente nei componenti funzionali, non è possibile raggiungere lo stato precedente useEffectsenza prima salvarlo, ad esempio con useRef. Questo significa anche che l'aggiornamento dello stato potrebbe essere stato implementato in modo errato nel posto sbagliato perché lo stato precedente è disponibile all'interno della setStatefunzione di aggiornamento.

Questo è un buon caso d'uso per il useReducerquale fornisce un negozio simile a Redux e consente di implementare il rispettivo modello. Gli aggiornamenti di stato vengono eseguiti in modo esplicito, quindi non è necessario capire quale proprietà di stato viene aggiornata; questo è già chiaro dall'azione inviata.

Ecco un esempio di come potrebbe apparire:

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'uso di Ref introdurrà un nuovo tipo di bug nell'app.

Vediamo questo caso usando usePreviousquello che qualcuno ha commentato prima:

1. prop.minTime: 5 ==> ref.current = 5 | imposta ref.current
2. prop.minTime: 5 ==> ref.current = 5 | il nuovo valore è uguale a ref.current
3. prop.minTime: 8 ==> ref.current = 5 | il nuovo valore NON è uguale a ref.current
4. prop.minTime: 5 ==> ref.current = 5 | il nuovo valore è uguale a ref.current

Come possiamo vedere qui, non stiamo aggiornando l'interno refperché stiamo usandouseEffect

Per un confronto di oggetti di scena davvero semplice puoi usare useEffect per verificare facilmente se un oggetto di scena è stato aggiornato.

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

}

useEffect eseguirà quindi il codice solo se il prop cambia.

Uscendo dalla risposta accettata, una soluzione alternativa che non richiede un hook personalizzato:

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

Ecco un gancio personalizzato che uso e che ritengo sia più intuitivo dell'uso 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)
}

Utilizzeresti useTransitioncome segue.

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

Spero che aiuti.