DevSurge 💦

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

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

Что такое Suspense в React

Suspense - это фича React, которая позволяет декларативно обрабатывать асинхронные операции, «приостанавливая» рендеринг дерева компонентов до выполнения определенных условий. Обеспечивает плавный способ отображения индикаторов загрузки или резервного пользовательского интерфейса в ожидании загрузки асинхронного кода.

Когда и зачем использовать Suspense

  1. Разделение кода с ленивой загрузкой: Suspense работает с React.lazy() для динамического импорта компонентов и отображения резервного содержимого во время загрузки компонента. Это улучшает производительность начальной загрузки за счет уменьшения размера пакетов JavaScript.
  2. Получение данных: 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.

Другие материалы