SamwithCode

Create Global Loading State in React 2025

🌐 Create Global Loading State in React 2025

🔍 Why Use a Global Loading State?

In large React apps, you may fetch data in many components. Instead of adding a separate loading state in each one, you can manage a global loading state using Context API and useReducer.

⚙️ Step-by-Step Guide

1. Create a Context


import { createContext, useContext, useReducer } from 'react';

const LoadingContext = createContext();

const initialState = { loading: false };

const loadingReducer = (state, action) => {
  switch (action.type) {
    case 'START_LOADING':
      return { loading: true };
    case 'STOP_LOADING':
      return { loading: false };
    default:
      return state;
  }
};

export const LoadingProvider = ({ children }) => {
  const [state, dispatch] = useReducer(loadingReducer, initialState);

  return (
    
      {children}
    
  );
};

export const useLoading = () => useContext(LoadingContext);

2. Wrap Your App with Provider


import { LoadingProvider } from './LoadingContext';
import App from './App';

const Root = () => (
  
    
  
);

export default Root;

3. Use Global Loading in Any Component


import { useLoading } from './LoadingContext';

const SomeComponent = () => {
  const { loading, dispatch } = useLoading();

  const fetchData = async () => {
    dispatch({ type: 'START_LOADING' });
    const res = await fetch('https://pokeapi.co/api/v2/pokemon');
    const data = await res.json();
    dispatch({ type: 'STOP_LOADING' });
  };

  return (
    

      {loading ? 
Loading...
 : }
    

  );
};

✅ Benefits

  • Centralized loading control
  • No duplication across components
  • Cleaner UI logic