Что такое React Suspense и зачем он нужен

Что такое Suspense в React
Suspense
- это фича React, которая позволяет декларативно обрабатывать асинхронные операции, «приостанавливая» рендеринг дерева компонентов до выполнения определенных условий. Обеспечивает плавный способ отображения индикаторов загрузки или резервного пользовательского интерфейса в ожидании загрузки асинхронного кода.
Когда и зачем использовать Suspense
- Разделение кода с ленивой загрузкой:
Suspense
работает сReact.lazy()
для динамического импорта компонентов и отображения резервного содержимого во время загрузки компонента. Это улучшает производительность начальной загрузки за счет уменьшения размера пакетов JavaScript. - Получение данных:
Suspense
упрощает работу с асинхронным получением данных, приостанавливая рендеринг до тех пор, пока данные не станут доступны. Он интегрируется с такими инструментами, какReact Query
,Relay
и хукомuse
.
Примеры использования
1. Ленивая загрузка компонентов
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
export default App;
Пример использования: Улучшает производительность, загружая LazyComponent
только тогда, когда это необходимо.
2. Загрузка данных с помощью React.use
Suspense
может работать с асинхронной загрузкой данных с помощью нового хука use
.
import React, { Suspense, use } from 'react';
async function fetchData() {
const response = await fetch('https://api.example.com/data');
return response.json();
}
const resource = fetchData();
function DataComponent() {
const data = use(resource);
return <div>{data.message}</div>;
}
function App() {
return (
<Suspense fallback={<div>Loading data...</div>}>
<DataComponent />
</Suspense>
);
}
export default App;
Пример использования: Откладывает рендеринг компонента DataComponent
до тех пор, пока резолвится промис fetchData
.
3. Интеграция с React Query
import { Suspense } from 'react';
import { useQuery } from '@tanstack/react-query';
function DataComponent() {
const { data } = useQuery(['data'], () =>
fetch('https://api.example.com/data').then(res => res.json())
);
return <div>{data.message}</div>;
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<DataComponent />
</Suspense>
);
}
export default App;
Пример использования: Использует Suspense
в качестве фолбэка пока React Query
обрабатывает загрузку данных.
4. Вложенные Suspense
контуры
Для сложных UI можно создавать вложенные контуры Suspense чтобы обеспечить более гранулированный резервный контент.
function App() {
return (
<Suspense fallback={<div>Loading app...</div>}>
<Header />
<Suspense fallback={<div>Loading main content...</div>}>
<MainContent />
</Suspense>
<Footer />
</Suspense>
);
}
Пример использования: Различные части пользовательского интерфейса могут отображать свои состояния загрузки независимо друг от друга.
Лучшие практики работы с Suspense
Используйте резервные копии с умом:
- Сохраняйте простой и релевантный UI относительно приостановленного компонента.
- Избегайте чрезмерной вложенности
Suspense
, так как это может запутать пользователей.
Оптимизируйте получение данных:
- Объедините
Suspense
с такими библиотеками, какReact Query
илиRelay
для лучшей интеграции и кэширования. - Избегайте ненужной блокировки рендеринга, используя эффективные стратегии кэширования.
Тестируйте пользовательский опыт: Убедитесь, что Suspense
обеспечивает плавную работу в различных сетевых условиях.
Ограничения Suspense
- Полнота поддержки: Не все библиотеки для получения данных полностью интегрируются с
Suspense
. Некоторые библиотеки (например,React Query
) требуют дополнительных оберток для совместимости. - Рендеринг на стороне сервера: Suspense оптимизирован для получения данных с помощью `use` в серверных компонентах, но может потребовать тщательной настройки для гибридных приложений.
За более подробной информацией обращайтесь к React документации по Suspense и изучайте практические примеры в экосистеме React.