Новые хуки React 18 и варианты их использования

Выпуск React 18 принес несколько интересных функций и улучшений в популярную библиотеку JavaScript, что сделало разработку пользовательских интерфейсов еще более эффективной и приятной.

Среди этих улучшений — введение двух новых хуков: useDeferredValue и useTransition. В этой статье представлен всесторонний обзор этих новых хуков, их преимуществ и практических вариантов использования, которые помогут вам полностью использовать их потенциал в ваших приложениях React.

использованиеDeferredValue

Хук useDeferredValue позволяет разработчикам откладывать рендеринг менее важных обновлений, чтобы отдать приоритет более важным. Этот подход улучшает взаимодействие с пользователем, гарантируя, что высокоприоритетные обновления, такие как взаимодействие с пользователем, не блокируются обновлениями с более низким приоритетом.

Использование:

import { useDeferredValue } from 'react';

const deferredValue = useDeferredValue(value, { timeoutMs });

Практический вариант использования:

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

import { useState, useDeferredValue } from 'react';

function SearchComponent({ items }) {
  const [search, setSearch] = useState('');
  const deferredSearch = useDeferredValue(search, { timeoutMs: 200 });

  const filteredItems = items.filter(item => item.includes(deferredSearch));

  return (
    <>
      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="Search items"
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

value — это значение, которое вы хотите отложить, а timeoutMs — это необязательный объект конфигурации, который указывает максимальное время, в течение которого хук должен ждать перед обновлением отложенного значения.

использованиеПереход

Хук useTransition помогает управлять переходами состояний более контролируемым и эффективным образом. Это позволяет разработчикам предоставлять немедленную обратную связь пользователям во время перехода между состояниями, уменьшая воспринимаемую задержку в приложении.

Использование:

import { useTransition } from 'react';

const [startTransition, isPending] = useTransition({ timeoutMs });

timeoutMs — это необязательный объект конфигурации, который указывает максимальное время, в течение которого хук должен ждать, прежде чем считать переход завершенным. startTransition — это функция, используемая для запуска перехода, а isPending — логическое значение, указывающее, продолжается ли переход.

Практический вариант использования:

Рассмотрим сценарий, в котором вы извлекаете данные из API и хотите отобразить счетчик загрузки во время ожидания данных. Хук useTransition можно использовать для обеспечения того, чтобы счетчик загрузки отображался сразу после запуска выборки данных, обеспечивая плавный пользовательский интерфейс.

import { useState, useTransition } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

  const fetchData = async () => {
    startTransition(async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    });
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>

      {isPending && <div>Loading...</div>}

      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

В этом примере при нажатии кнопки «Выборка данных» вызывается функция startTransition, чтобы инициировать процесс выборки данных. Пока данные извлекаются, логическое значение isPending устанавливается равным true, в результате чего отображается div 'Loading...'. После извлечения данных и вызова функции setData логическое значение isPending устанавливается равным false, и полученные данные отображаются в списке.

Новые хуки React 18, useDeferredValue и useTransition, значительно улучшают производительность и улучшают взаимодействие с пользователем в приложениях React. Понимая их назначение и варианты практического использования, разработчики могут использовать эти крючки для создания более отзывчивых и эффективных приложений.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .