React Suspenseの連携：複数コンポーネントの読み込み状態をマスターする

            import React, { Suspense } from 'react';

// Simulated asynchronous data fetching
const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: 'Fetched data!' });
    }, 2000);
  });
};

const Resource = {
  read() {
    if (!this.promise) {
      this.promise = fetchData().then(data => {
        this.data = data;
        return data; // Ensure the promise resolves with the data
      });
    }

    if (this.data) {
      return this.data;
    } else if (this.promise) {
      throw this.promise; // Suspend!
    } else {
      throw new Error('Unexpected state'); // Should not happen
    }
  }
};


const MyComponent = () => {
  const data = Resource.read();
  return <p>{data.data}</p>;
};

const App = () => {
  return (
    <Suspense fallback=<p>Loading...</p>>
      <MyComponent />
    </Suspense>
  );
};

export default App;

            

              
                Copy
              
            
          

            import React, { Suspense } from 'react';

// Assume MyComponentA and MyComponentB both use resources that suspend
import MyComponentA from './MyComponentA';
import MyComponentB from './MyComponentB';

const Dashboard = () => {
  return (
    <Suspense fallback=<p>Loading Dashboard...</p>>
      <div>
        <MyComponentA />
        <MyComponentB />
      </div>
    </Suspense>
  );
};

export default Dashboard;

            

              
                Copy
              
            
          

            import React, { Suspense } from 'react';

// Assume ProductDetails and CustomerReviews both use resources that suspend
import ProductDetails from './ProductDetails';
import CustomerReviews from './CustomerReviews';

const ProductPage = () => {
  return (
    <div>
      <Suspense fallback=<p>Loading Product Details...</p>>
        <ProductDetails />
      </Suspense>

      <Suspense fallback=<p>Loading Customer Reviews...</p>>
        <CustomerReviews />
      </Suspense>
    </div>
  );
};

export default ProductPage;

            

              
                Copy
              
            
          

            import React, { createContext, useContext, useState, useEffect } from 'react';

const LoadingContext = createContext();

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

const LoadingProvider = ({ children }) => {
  const [isLoadingA, setIsLoadingA] = useState(true);
  const [isLoadingB, setIsLoadingB] = useState(true);

  useEffect(() => {
    // Simulate data fetching for Component A
    setTimeout(() => {
      setIsLoadingA(false);
    }, 1500);

    // Simulate data fetching for Component B
    setTimeout(() => {
      setIsLoadingB(false);
    }, 2500);
  }, []);

  const isLoading = isLoadingA || isLoadingB;

  return (
    <LoadingContext.Provider value={{ isLoadingA, isLoadingB, isLoading }}>
      {children}
    </LoadingContext.Provider>
  );
};

const MyComponentA = () => {
  const { isLoadingA } = useLoading();

  if (isLoadingA) {
    return <p>Loading Component A...</p>;
  }

  return <p>Data from Component A</p>;
};

const MyComponentB = () => {
  const { isLoadingB } = useLoading();

  if (isLoadingB) {
    return <p>Loading Component B...</p>;
  }

  return <p>Data from Component B</p>;
};

const App = () => {
  const { isLoading } = useLoading();

  return (
    <LoadingProvider>
      <div>
        {isLoading ? (<p>Loading Application...</p>) : (
          <>
            <MyComponentA />
            <MyComponentB />
          <>
        )}
      </div>
    </LoadingProvider>
  );
};

export default App;

            

              
                Copy
              
            
          

            import React, { Suspense } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

// Assume MyComponent can throw an error during rendering (e.g., due to failed data fetching)
import MyComponent from './MyComponent';

const App = () => {
  return (
    <ErrorBoundary>
      <Suspense fallback=<p>Loading...</p>>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

export default App;

            

              
                Copy
              
            
          

            import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent')); // Dynamically import MyComponent

const App = () => {
  return (
    <Suspense fallback=<p>Loading component...</p>>
      <MyComponent />
    </Suspense>
  );
};

export default App;

            

              
                Copy