Interview question

What is React Suspense and how do you use it? React Suspense क्या है और कैसे use करते हैं?

Answer

// Suspense for code splitting
import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// Suspense for data fetching (experimental)
function User({ id }) {
  const user = fetchUser(id).read();
  return <h1>{user.name}</h1>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading user...</div>}>
      <User id={1} />
    </Suspense>
  );
}

Suspense - async components के लिए loading state।

lazy(() => import('./Component'))
<Suspense fallback={<Loading />}>

Was this answer clear?

Subjects

Related questions