React useEffect，仅在状态更改后调用

Question

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])

Answer 1

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])
}