रिएक्ट सस्पेंस रिसोर्स डी डुप्लीकेशन: डुप्लीकेट रिक्वेस्ट को रोकना

            
import React, { Suspense } from 'react';

const fetchUser = (userId) => {
  console.log(`Fetching user with ID: ${userId}`); // Simulate network request
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: userId, name: `User ${userId}`, email: `user${userId}@example.com` });
    }, 1000); // Simulate network latency
  });
};

const cache = {}; // Simple cache

const UserResource = (userId) => {
  if (!cache[userId]) {
    let promise = null;
    let status = 'pending'; // pending, success, error
    let result;

    const suspender = fetchUser(userId).then(
      (r) => {
        status = 'success';
        result = r;
      },
      (e) => {
        status = 'error';
        result = e;
      }
    );

    cache[userId] = {
      read() {
        if (status === 'pending') {
          throw suspender;
        } else if (status === 'error') {
          throw result;
        }
        return result;
      },
    };
  }
  return cache[userId];
};

const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
User Profile
      
ID: {user.id}
      
Name: {user.name}
      
Email: {user.email}
    
  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
User Details
      
ID: {user.id}
      
Name: {user.name}
    
  );
};

const App = () => {
  return (
    Loading...