How to call loading function with React useEffect only once?

If you want to run a loading function (such as fetching data) exactly once when a React component mounts, the most common approach is to use the useEffect hook with an empty dependency array. Here’s a quick breakdown:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // This function will run only once when the component mounts
    loadData();
  }, []); // Empty dependency array

  const loadData = () => {
    // Your loading or data-fetch logic here
    console.log('Loading data...');
  };

  return <div>My Component</div>;
}

export default MyComponent;

How It Works

• The empty dependency array ([]) tells React that this effect has no dependencies.
• As a result, the effect runs only once—right after the initial render (i.e., when the component mounts).

Caveats: React Strict Mode and Double-Invoking

• In React 18 (with Strict Mode enabled), React may double-invoke certain lifecycle and effect functions in development to help you detect side-effects that are not idempotent. This behavior doesn’t occur in production builds, so your effect still runs once in production. If you’re noticing double-logs or double fetch calls in development, that’s likely the cause.

Alternative Approaches

1. Conditionally Running an Effect
   If you want more control—such as running the effect once but only after some other conditions are met—you can keep track of whether the data was loaded using a local state variable:

   function MyComponent() {
     const [isLoaded, setIsLoaded] = React.useState(false);
   
     useEffect(() => {
       if (!isLoaded) {
         loadData();
         setIsLoaded(true); // Mark as loaded
       }
     }, [isLoaded]);
   
     const loadData = () => {
       // fetch or load data
     };
   
     return <div>My Component</div>;
   }

2. Using a Global Store or Context
   If this loading logic needs to be shared across multiple components, consider using a React Context or a global state manager (like Redux, Zustand, etc.) to orchestrate one-time data fetching at a higher level in your application.

Summary

• To ensure a function is called once when your component mounts, provide an empty dependency array ([]) to useEffect.
• Keep in mind that Strict Mode may cause a second invocation in development, but that doesn’t affect production behavior.
• If you need more nuanced control, track your loaded state and conditionally run your effect, or use higher-level patterns like a global store or React Context.