Execute different code of useEffect's callback function on dependency changes

A function fetchData() to be called as the component loads and also to be called whenever testA and testB prop to this component changes. And also when only testA prop changes I want to perform state update. Now the state update is happening when either testA and testB changes.

useEffect(()=>{     fetchData();     // Only When testA changes I want to update the below state.     // setTableData([]);  },[testA, testB]);  

If I use 2 useEffect I will be calling the fetchData twice on initial render. Which is not acceptable.

useEffect(()=>{     fetchData();     setTableData([]);  },[testA]);    useEffect(()=>{     fetchData();  },[testB]);    

How to achieve this functionality using hooks?

https://stackoverflow.com/questions/66997176/execute-different-code-of-useeffects-callback-function-on-dependency-changes April 08, 2021 at 12:03PM