React useEffect, only call after a state change-CodePudding

We are using react recollect as state management tool. In this useEffect below, I want to call appStore.getSettingsHistory() function only if the states in array dependency does change. But based on the below code, when component mounts, we see 5 calls (as many as in array) initially, then other calls as those state change. How can I achieve, calling this api (appStore.getSettingsHistory()) only once in the beginning, then as these states change.

useEffect(() => {
  appStore.getSettingsHistory();
}, [store.brandPrefs, store.formularies, store.selectedFormularyName, store.settings.showMaskToPatient, store.settings.sendMessageOnComplete])

CodePudding user response：

This happens when you are using the strict mode

CodePudding user response：

I suppose you could create another state variable and check whether your component is first rendered and in that case call the API once and in other cases call it based on the dependency array. Something like this -

const [mounted, setMount] = useState(false);
if(!mounted){
    useEffect(() => {
    appStore.getSettingsHistory();
    setMount(true);
    },[])
}
else{
    useEffect(() => {
    appStore.getSettingsHistory();
    }, [store.brandPrefs, store.formularies, store.selectedFormularyName, 
    store.settings.showMaskToPatient,  store.settings.sendMessageOnComplete])
}