If we want to restrict useEffect to run only when the component mounts, we can add second parameter of useEffect with [].
useEffect(() => { // ... }, []); But how can we make useEffect to run only when the moment when the component is updated except initial mount?
If you want the useEffect to run only on updates except initial mount, you can make use of useRef to keep track of initialMount with useEffect without the second parameter.
const isInitialMount = useRef(true); useEffect(() => { if (isInitialMount.current) { isInitialMount.current = false; } else { // Your useEffect code here to be run on update } }); 
I really like Shubham's response, so I made it a custom Hook
/** * A custom useEffect hook that only triggers on updates, not on initial mount * @param {Function} effect * @param {Array<any>} dependencies */ export default function useUpdateEffect(effect, dependencies = []) { const isInitialMount = useRef(true); useEffect(() => { if (isInitialMount.current) { isInitialMount.current = false; } else { return effect(); } }, dependencies); } 
return effect(); instead of just calling effect(); so that we honor the clean up function?
useEffect twice on the initial mount, thus making the useUpdateEffect run when the component mounts.Both Shubham and Mario suggest the right approach, however the code is still incomplete and does not consider following cases.
effect function may have a cleanup function returned from it, that would never get called Sharing below a more complete code which covers above two missing cases:
import React from 'react'; const useIsMounted = function useIsMounted() { const isMounted = React.useRef(false); React.useEffect(function setIsMounted() { isMounted.current = true; return function cleanupSetIsMounted() { isMounted.current = false; }; }, []); return isMounted; }; const useUpdateEffect = function useUpdateEffect(effect, dependencies) { const isMounted = useIsMounted(); const isInitialMount = React.useRef(true); React.useEffect(() => { let effectCleanupFunc = function noop() {}; if (isInitialMount.current) { isInitialMount.current = false; } else { effectCleanupFunc = effect() || effectCleanupFunc; } return () => { effectCleanupFunc(); if (!isMounted.current) { isInitialMount.current = true; } }; }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps }; 
isInitialMount.current = true; when cleaning up? Is that really necessary?const [mounted, setMounted] = useRef(false) useEffect(() => { if(!mounted) return setMounted(true) ... }) export const useMounted = () => { const mounted = useRef(false) useEffect(() => { mounted.current = true return () => { mounted.current = false } }, []) return () => mounted.current } const Component = () => { const mounted = useMounted() useEffect(() => { if(!mounted()) return ... }) } 
You can get around it by setting the state to a non-boolean initial value (like a null value) :
const [isCartOpen,setCartOpen] = useState(null); const [checkout,setCheckout] = useState({}); useEffect(() => { // check to see if its the initial state if( isCartOpen === null ){ // first load, set cart to real initial state, after load setCartOpen( false ); }else if(isCartOpen === false){ // normal on update callback logic setCartOpen( true ); } }, [checkout]); 
isCartOpen isn't being observed and will always be null.Took help from Subham's answer This code will only run for particular item update not on every update and not on component initial mounting.
const isInitialMount = useRef(true); //useEffect to run only on updates except initial mount //useEffect to run only on updates except initial mount useEffect(() => { if (isInitialMount.current) { isInitialMount.current = false; } else { if(fromScreen!='ht1' && appStatus && timeStamp){ // let timeSpentBG = moment().diff(timeStamp, "seconds"); // let newHeatingTimer = ((bottomTab1Timer > timeSpentBG) ? (bottomTab1Timer - timeSpentBG) : 0); // dispatch({ // type: types.FT_BOTTOM_TAB_1, // payload: newHeatingTimer, // }) // console.log('Appstaatus', appStatus, timeSpentBG, newHeatingTimer) } } }, [appStatus]) If you tried Shubham's answer, and the useeffect is still being called on the initial mount, you can easily fix this by disabling React strictmode. But if you don't want to disable strictmode, use this.
// The init variable is necessary if your state is an object/array, because the == operator compares the references, not the actual values. const init = []; const [state, setState] = useState(init); const dummyState = useRef(init); useEffect(() => { // Compare the old state with the new state if (dummyState.current == state) { // This means that the component is mounting } else { // This means that the component updated. dummyState.current = state; } }, [state]); Works in development mode...
function App() { const init = []; const [state, setState] = React.useState(init); const dummyState = React.useRef(init); React.useEffect(() => { if (dummyState.current == state) { console.log('mount'); } else { console.log('update'); dummyState.current = state; } }, [state]); return ( <button onClick={() => setState([...state, Math.random()])}>Update state </button> ); } ReactDOM.createRoot(document.getElementById("app")).render( <React.StrictMode> <App /> </React.StrictMode> );<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="app"></div>And in production.
function App() { const init = []; const [state, setState] = React.useState(init); const dummyState = React.useRef(init); React.useEffect(() => { if (dummyState.current == state) { console.log('mount'); } else { console.log('update'); dummyState.current = state; } }, [state]); return ( <button onClick={() => setState([...state, Math.random()])}>Update state </button> ); } ReactDOM.createRoot(document.getElementById("app")).render( <React.StrictMode> <App /> </React.StrictMode> );<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id="app"></div>To make a custom hook compliant with the rules of hooks you don't need to actually pass dependencies, just wrap your effect function with useCallback
function useEffectOnUpdate(callback) { const mounted = useRef(); useEffect(() => { if (!mounted.current) { mounted.current = true; } else { callback(); } }, [callback]); }; function SomeComponent({ someProp }) { useEffectOnUpdate(useCallback(() => { console.log(someProp); }, [someProp])); return <div>sample text</div>; } When using React strict mode, the solution has to change because React will do the initial render twice and throw an exception if the order of your use of useRef and useEffect is different. I found that the following works as a modification of @shubham-khatri's answer:
const isInitialMount = useRef(true); useEffect(() => { if (isInitialMount.current === true) { // Your useEffect code here to be run on update } isInitialMount.current = false; }); 
Use the Cleanup function of the useEffect without using an empty array as a second parameter:
useEffect(() => { return () => { // your code to be run on update only. } }); 
