React detect which props have changed on useEffect trigger-CodePudding

I want to detect which of the argument props have changed inside my use effect. How can I achieve this? I need something like this:

const myComponent = () => {
   ...
   useEffect(() => {
      if (prop1 === isTheOneThatChangedAndCusedTheTrigger){
         doSomething(prop1);
      }else{
         doSomething(prop2);
      }
   },[prop1, prop2]);
};

export function myComponent;

CodePudding user response：

While you can use something like usePrevious to retain a reference to the last value a particular state contained, and then compare it to the current value in state inside the effect hook...

const usePrevious = (state) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = state;
  }, [value]);
  return ref.current;
}
const myComponent = () => {
   const [prop1, setProp1] = useState();
   const prevProp1 = usePrevious(prop1);
   const [prop2, setProp2] = useState();
   const prevProp2 = usePrevious(prop2);

   useEffect(() => {
      if (prop1 !== prevProp1){
         doSomething(prop1);
      }
      // Both may have changed at the same time - so you might not want `else`
      if (prop2 !== prevProp2) {
         doSomething(prop2);
      }
   },[prop1, prop2]);
};

It's somewhat ugly. Consider if there's a better way to structure your code so that this isn't needed - such as by using separate effects.

useEffect(() => {
  doSomething(prop1);
}, [prop1]);
useEffect(() => {
  doSomething(prop2);
}, [prop2]);