React Hooks 3: Новые крючки в React 18

Я все еще знакомлюсь с новыми обновлениями в React 18, такими как Concurrency, Automatic Batching, новые функции Transitions и Suspense (возможно, я напишу об этом). Тем не менее, чтобы закончить этот раздел, я собираюсь рассмотреть новые хуки в React 18.

useId

Этот новый хук будет генерировать уникальный ID с обеих сторон, клиента и сервера, избегая при этом несоответствия гидирования.

Этот хук будет полезен в основном в библиотеках компонентов, интегрированных с API Accessibility, которые требуют уникальных идентификаторов.

Помните: useId не предназначен для генерации ключей в списке, ключи должны быть сгенерированы из ваших данных.

Для базового примера передавайте id непосредственно элементам, которым он нужен:

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>This is an Example</label>
      <input id={id} type="checkbox" name="react"/>
    </>
  );
};

Для нескольких идентификаторов в одном компоненте добавьте суффикс, используя тот же идентификатор:

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <div>
        <input id={id + '-firstName'} type="text" />
      </div>
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <div>
        <input id={id + '-lastName'} type="text" />
      </div>
    </div>
  );
}

useTransition и startTransition

Они позволят вам пометить некоторые обновления состояния как несрочные, некоторые обновления могут считаться срочными по умолчанию (обновление текстового ввода), и эти обновления будут прерывать несрочные.

const [isPending, startTransition] = useTransition();
//startTransition lets you mark updates in the provided callback as transitions:
startTransition(() => {
  setCount(count + 1);
})
//isPending indicates when a transition is active to show a pending state:
function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1);
    })
  }

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

useDeferredValue

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

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

Он также откладывает только то значение, которое вы ему передаете. Если вы хотите предотвратить повторный рендеринг дочернего компонента во время срочного обновления, вы также должны мемоизировать этот компонент с помощью React Memo или React useMemo.

function Typeahead() {
  const query = useSearchQuery('');
  const deferredQuery = useDeferredValue(query);

  // Memoizing tells React to only re-render when deferredQuery changes,
  // not when query changes.
  const suggestions = useMemo(() =>
    <SearchSuggestions query={deferredQuery} />,
    [deferredQuery]
  );

  return (
    <>
      <SearchInput query={query} />
      <Suspense fallback="Loading results...">
        {suggestions}
      </Suspense>
    </>
  );
}

useInsertionEffect (предназначен для использования в библиотеках)

useInsertionEffect — это новый хук, который позволяет CSS-in-JS библиотекам решать проблемы производительности инъекции стилей при рендеринге. Если вы еще не создали библиотеку CSS-in-JS, то вряд ли вы когда-нибудь будете ее использовать.

В качестве источника всей этой информации и дальнейших ссылок, вы должны просмотреть документацию React Hooks.

Спасибо за прочтение, я ценю ваше время. Если вам нужна помощь или у вас есть вопросы, пожалуйста, обращайтесь!

Если у вас есть вопросы, не стесняйтесь написать мне на LinkedIn или по электронной почте. 😊

Хорошего дня!