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])
}
const [mounted, setMounted] = useState(false);
useEffect(() => {
if (!mounted) {
setMounted(true);
return;
}
// Run API Call
}, [props])
const ref = useRef();
useEffect(() => {
if (!ref.current) {
ref.current = true
return;
}
// Run API Call
}, [props])
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.