useEffectOnce

React, Hooks, Effect

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 the when condition changes.
  • Check if when is true and the effect has not executed before. If both are true, run callback and set hasRunOnce to true.
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.render(<App />, document.getElementById('root'));

Recommended snippets

  • useOnWindowResize

    React, Hooks

    Executes a callback whenever the window is resized.

  • useSSR

    React, Hooks

    Checks if the code is running on the browser or the server.

  • Executes a callback immediately after a component is updated.