Новый hook в React — useActionState

На самом деле не совсем новый, а, скорее, слегка изменённый useFormState. Да и пулл-реквест этим новым хуком ещё не влит и вроде как радоваться ещё рановато. Но я всё равно расскажу о том, что этот новый хук нам предлагает))

Что нового в useActionState?

Самое главное отличие от useFormState в том, что новый хук будет доступен для импорта напрямую из react, а не из react-dom. А это означает, что его можно будет использовать и в React Native!

Второе нововведение — добавлен дополнительный параметр isPending. Это просто удобно — отдельная переменная, которая покажет, что действие всё ещё выполняется.

Ну и третье изменение — переименование useFormState в useActionState. Зачем понадобилось переименовать хук? Да просто хук useFormState не обязательно использовать только для форм. Его можно использовать везде. Пример ниже как раз это и демонстрирует:

import { useActionState, useRef } from "react";

function Form({ someAction }) {
  const ref = useRef(null);
  const [errorMessage, action, isPending] = useActionState(someAction);

  async function handleSubmit() {
    await action({ email: ref.current.value });
  }

  return (
    <div>
      <input ref={ref} type="email" name="email" disabled={isPending} />
      <button onClick={handleSubmit} disabled={isPending}>
        Submit
      </button>
      {errorMessage && <p>{errorMessage}</p>}
    </div>
  );
}

Выглядит вроде несложно: мы берём someAction и оборачиваем его в хук useActionState. Из вызова этого хука мы получаем errorMessage, само событие action, которое мы будем вызывать, и состояние isPending. Вроде всё)) Можете даже сравнить этот пример из пулл-реквеста с документацией по useFormState.

P.S. Ссылка на пулл-реквест содержит упоминание запрещенной на территории РФ экстремистской организации.