Question 261035 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to run a function only once in whole app?

When I use React.useEffect hook with empty dependency array, it re-renders on every re-routing when the back button pressed, not only once. Is there a minimal solution for a function to execute only once inside the whole app?

Tags:

3

Answers


  1. 0

    When the component mounts it will run it. If you unmount the component and re mount the component, it will render again. Move the useEffect to something that is above your router and it will only render once.

    Login or Signup to reply.
  2. 0

    One possible solution to ensure a function is run only once throughout the entire app is to leverage the capabilities of local storage. By storing a flag that indicates whether the function has been previously executed, the app can check for this flag each time it is loaded and execute the function only if the flag is not present.

    import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const firstTime = localStorage.getItem('firstTime');
    if (!firstTime) {
      // run the function here
      localStorage.setItem('firstTime', true);
    }
  }, []);

  return (
    // your app code here
  );
}

    you can also change it as sessionStorage instead of localStorage to only run once per user session.

    Login or Signup to reply.
  3. 0

    creating a custom hook that takes a function as an argument and only executes it once. would be reusable and can be called in any component, passing in the desired function as an argument.

    function useExecuteOnce(func){
  const [isExecuted, setIsExecuted] = useState(false);

  React.useEffect(() => {
    if (!isExecuted) {
      func(); // execute passed in function
      setIsExecuted(true);
    }
  }, []);

  return isExecuted;
}

    Using the hook in component:

    function MyComponent() {

  const isExecuted = useExecuteOnce(myFunction);

  // rest of component code

}

    will only be executed once, and the hook can be reused in other components as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search