Run useEffect only after prop is updated-CodePudding

I'm passing a prop necessary to run an API call into my component and I do not want it to run on initial rendering but only once this prop has been updated by a form submission. Even though I'm putting props in the dependency argument it still runs the call on mount. How can I prevent useEffect from automatically running on initial rendering? Maybe there's a completely different method I should be considering?

function GetData(props) {


 const [propsState, propsSetState] = useState('');

 useEffect(() => {

  // Run API Call

 }, [props])
}

CodePudding user response：

const [mounted, setMounted] = useState(false);

useEffect(() => {

  if (!mounted) {
    setMounted(true);
    return;
  }

  // Run API Call

}, [props])

CodePudding user response：

const ref = useRef();

useEffect(() => {

  if (!ref .current) {
    ref.current = true
    return;
  }

  // Run API Call

}, [props])

CodePudding user response：

In your return statement use logical && to evaluate if something is updated before run the API in your component.

{propState && <*YourComponent* />}

First Fetch the data, once the data is being retrieve, then update the state in your const[], once it has the value, your component then render the output.