React useEffectOnce hook
Runs a callback at most once when a condition becomes true.
- Use the
useRef()
hook to create a variable,hasRunOnce
, to keep track of the execution status of the effect. - Use the
useEffect()
that runs only when thewhen
condition changes. - Check if
when
istrue
and the effect has not executed before. If both aretrue
, runcallback
and sethasRunOnce
totrue
.
const useEffectOnce = (callback, when) => { const hasRunOnce = React.useRef(false); React.useEffect(() => { if (when && !hasRunOnce.current) { callback(); hasRunOnce.current = true; } }, [when]); }; const App = () => { const [clicked, setClicked] = React.useState(false); useEffectOnce(() => { console.log('mounted'); }, clicked); return <button onClick={() => setClicked(true)}>Click me</button>; }; ReactDOM.createRoot(document.getElementById('root')).render( <App /> );