React Suspense की जानकारी

React Suspense एक 'please wait' sign जैसा है जिसे एक component अपने दरवाज़े पर टांग सकता है जब तक वह ready न हो, एक parent को blank room के बजाय एक अच्छा loading message दिखाने देते हुए।

In this page:

Suspense क्या करता है
कई Suspending Children के लिए एक Fallback
Suspense एक General Async Replacement नहीं है

Syntax

markup

<Suspense fallback={<p>Loading...</p>}>
  <LazyComponent />
</Suspense>

Suspense क्या करता है

Suspense एक component को rendering pause करने और इसके बजाय एक fallback UI (जैसे एक spinner) दिखाने देता है, जब तक वह जिसका इंतज़ार कर रहा है ready न हो जाए। आज इसका सबसे common, stable use code-splitting के लिए React.lazy() है, जहां Suspense एक fallback दिखाता है जब तक component का code अभी भी download हो रहा हो।

Note: Suspense को सभी async handling के लिए एक general-purpose replacement के बजाय एक specialized, built-in loading-state mechanism के रूप में सोचें।

Warning: Suspense का fallback prop required है — इसके बिना, wrapped content ready न होने तक दिखाने के लिए कुछ भी नहीं है।

उदाहरण: What Suspense Does

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const LazyComponent = React.lazy(() =>
  Promise.resolve({ default: () => <p>I loaded (simulated lazy import)</p> })
);
function App() {
  return (
    <React.Suspense fallback={<p>Loading...</p>}>
      <LazyComponent />
    </React.Suspense>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

कई Suspending Children के लिए एक Fallback

एक single Suspense boundary एक साथ कई lazy-loaded (या otherwise suspending) children को wrap कर सकता है। Fallback तब दिखता है जब उनमें से कोई भी ready न हो, और actual content सिर्फ तभी दिखता है जब उन सबका loading खत्म हो जाए।

Note: Related lazily-loaded pieces को एक Suspense boundary के तहत group करें जब आप चाहते हों कि वे एक साथ दिखें, बजाय इसके कि वे एक-एक करके pop हों।

Warning: अगर एक child बाकियों से कहीं ज़्यादा समय लेता है, तो पूरा group तब तक fallback पर रहता है जब तक सबसे slow वाला खत्म न हो जाए — अगर यह desired न हो तो separate boundaries consider करें।

उदाहरण: One Fallback for Multiple Suspending Children

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const ComponentA = React.lazy(() => Promise.resolve({ default: () => <p>A loaded</p> }));
const ComponentB = React.lazy(() => Promise.resolve({ default: () => <p>B loaded</p> }));
function App() {
  return (
    <React.Suspense fallback={<p>Loading both...</p>}>
      <ComponentA />
      <ComponentB />
    </React.Suspense>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Suspense एक General Async Replacement नहीं है

Suspense किसी भी Promise या arbitrary async code के साथ automatically काम नहीं करता — इसे specifically इसके साथ integrate करने के लिए बना हुआ कुछ चाहिए, जैसे components के लिए React.lazy, या explicit Suspense support वाली एक data-fetching library।

useEffect के अंदर एक plain fetch() अपने आप suspend नहीं होता।

Note: बिना Suspense-compatible library के plain data fetching के लिए, इसके बजाय useFetch/useEffect tutorials के loading/error state patterns से चिपके रहें।

Warning: एक component को Suspense में wrap करना जो एक normal useEffect-based fetch करता है कुछ useful नहीं करता — Suspense उस fetch को detect या इसका इंतज़ार बिल्कुल नहीं करेगा।

उदाहरण: Suspense Is Not a General Async Replacement

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
// This does NOT integrate with Suspense automatically:
function NormalFetcher() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => { setData("loaded"); }, []);
  return <p>{data || "loading (Suspense doesn't see this)"}</p>;
}
function App() {
  return <React.Suspense fallback={<p>This fallback won't show for the above</p>}><NormalFetcher /></React.Suspense>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Modals using Portals (practical use) Next Lesson → Code Splitting with React.lazy

React Suspense की जानकारी

Suspense क्या करता है

कई Suspending Children के लिए एक Fallback

Suspense एक General Async Replacement नहीं है

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code