В любом веб-приложении решающее значение имеет управление загрузкой и состояниями ошибок. Отображение состояний загрузки информирует пользователя, но исторически такое управление может быть утомительным для реализации вручную.

React Query значительно упрощает обработку состояний загрузки и глобальных состояний. Действительно, React Query позволяет избежать избыточных запросов, тем самым оптимизируя производительность приложения.

Давайте рассмотрим пример кода, который реализует состояние загрузки в нашем приложении.

Определите перехватчик для получения списка пользователей:

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

Здесь мы извлекаем четырех пользователей с помощью useQuery. Мы добавляем 2-секундную задержку, чтобы проиллюстрировать состояние загрузки. Затем мы возвращаем данные и логическое значение состояния загрузки.

На стороне компонента давайте создадим компонент с именем. Пример:

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

В этом компоненте мы используем наш хук для получения списка пользователей. Перед рендерингом представления мы выполняем «ранний возврат» с сообщением о загрузке, затем отображаем заголовок, кнопку и пользователей.

Ограничения и альтернативы

Однако каждый сетевой вызов требует явного управления состоянием загрузки. Если код не факторизован, некоторые элементы представления могут ожидать отображения, например заголовок и действие.

Вот альтернатива, позволяющая избежать блокировки просмотра:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

Здесь мы используем условный рендеринг вместо «раннего возврата». Это решение менее читаемо и его сложнее поддерживать в сложных компонентах.

Идеальное решение: универсальный загрузочный компонент

Самое гениальное решение — создать компонент, который отображает наше сообщение о загрузке или наш основной компонент на основе переменной.

type Props = PropsWithChildren;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return 
Loading...
;
  }

  return {children}>;
};

Использование в нашем компоненте

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      ...
      
  );
};

Эта факторизация централизует логику условного рендеринга и унифицирует использование сообщений загрузки, предлагая более чистый и удобный в обслуживании код.

Откройте для себя магию саспенс

Но теперь, если я скажу вам, что этот компонент, который мы только что создали, уже встроен в React. Более того, это волшебно! Больше никакого ручного управления состояниями isLoading!

Как?

С React's Suspense (версия React >= 16.6) все становится проще и понятнее. Приостановка позволяет вам явно объявить React, что компонент ожидает асинхронных данных, и React позаботится обо всем за нас.

Реализация useSuspenseQuery

Давайте воспользуемся useSuspenseQuery для автоматического управления состоянием загрузки. Вот как это сделать:

Перехват для получения пользователей

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

Использование в компоненте с приостановкой

Теперь давайте обновим наш компонент «Пример», чтобы использовать приостановку:

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
  );
};

Преимущества саспенса

С помощью Suspense мы централизуем управление состоянием загрузки в одном месте, что делает код более читабельным и удобным в обслуживании. Резервный режим приостановки отображается автоматически, пока данные недоступны, что устраняет необходимость вручную управлять состояниями isLoading.

Более того, Suspense поощряет команды разработчиков факторизовать свой код. Используя стандартизированные компоненты загрузки и асинхронные обработчики состояний, разработчики могут создавать повторно используемые и согласованные модули, тем самым улучшая качество кода и удобство сопровождения в долгосрочной перспективе.

Заключение

Использование Suspense и useSuspenseQuery революционизирует управление состояниями загрузки в приложениях React. Такой подход не только упрощает код, но и улучшает взаимодействие с пользователем, обеспечивая плавный и последовательный рендеринг. Переход от useQuery к useSuspenseQuery — это естественная эволюция для более чистых и эффективных приложений.

Кроме того, интеграция Suspense побуждает команды разработчиков факторизовать свой код. В заключение отметим, что внедрение Suspense и использование SuspenseQuery — это не просто техническое улучшение, но и шаг к более здоровым и эффективным методам разработки.

Моя рассылка :D