Компонент Suspense — это фишка React, которая управляет асинхронной загрузкой кода, особенно когда ты используешь динамические импорты. Он позволяет тебе показать запасной контент пока загружаются ленивые компоненты.
Когда динамически импортируемый модуль ещё не загрузился, родительский компонент обычно рендерится раньше времени. Suspense решает эту проблему:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
Suspensefallback принимает любой валидный React-элемент, который показывается во время загрузкиКомпонент Suspense приостанавливает рендеринг до тех пор, пока ленивый компонент не загружается, а затем отображает fallback UI.
Новый — ещё не проверен сообществом
Вы