Arik ChakmaandKamran Ahmed
edcf0e683d
* Add more questions * wip: add lazy, conditional questions * wip: Add RSC questions * wip: add component's lifecycle * wip: add dependency array question * wip: add comment and state * chore: add more questions * wip: add list question * wip: add directive questions * fix: conventions and examples * wip: add custom hook question * wip: add hydration question * wip: add error boundary example * wip: add strict mode question * wip: investigating slow react app * Update src/data/question-groups/react/react.md * Update src/data/question-groups/react/react.md --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
720 B
720 B
Suspense is a component in React that lets you specify the fallback content to display while waiting for a component to load. It is used in conjunction with lazy() to lazily load components.
import { lazy, Suspense } from 'react';
const LazyRoadmapRender = lazy(() => import('./RoadmapRender'));
export function App() {
const [show, setShow] = useState(false);
return (
<>
<button onClick={() => setShow(true)}>Show</button>
{show && (
<Suspense fallback={<div>Loading...</div>}>
<LazyRoadmapRender />
</Suspense>
)}
</>
);
}
Until the RoadmapRender component is loaded, the Suspense component will display the Loading... fallback content.