How to compare oldValues and newValues on React Hooks useEffect?

by

You can write a custom hook to provide you a previous props using useRef

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

and then use it 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])
}

However its clearer and probably better and clearer to read and understand if you use two useEffect separately for each change id you want to process them separately

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to use `setState` callback on react hooks
  3. Does React batch state update functions when using hooks?
  4. How to use callback with useState hook in react [duplicate]
  5. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  6. In useEffect, what’s the difference between providing no dependency array and an empty one?
  7. With useEffect, how can I skip applying an effect upon the initial render?
  8. How to use throttle or debounce with React Hook?
  9. React Hook : Send data from child to parent component
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Set types on useState React Hook with TypeScript
  12. Stop useEffect from running on mount
  13. How to sync props to state using React hooks : setState()
  14. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  15. React.useState does not reload state from props
  16. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  17. React: useState or useRef?
  18. Lazy initial state – What it is and how to use it?
  19. Does a render happen before function in React Hooks useEffect is called?
  20. React Hooks – Modified state not reflecting immediately
  21. React Hooks – Modified state not reflecting immediately
  22. React Hooks: Why is .current null for useRef Hook?
  23. React hook rendering an extra time
  24. Field Array in React using formik
  25. ReactJS – prevState in the new useState React hook?
  26. React – Is useState ‘s setter function able to change?
  27. Passing array to useEffect dependency list
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment