Новые клиентские хуки React 19

год назад·9 мин. на чтение

Обзор и анализ ключевых обновлений и функциональности новых клиентских хуков в React 19

Вопреки распространенному мнению, основная команда React сосредоточена не только на компонентах React Server и Next.js. Новые хуки на стороне клиента появятся в следующей основной версии React, React 19. Они сосредоточены на двух основных точках React: получение данных и формы. Эти хуки повысят производительность разработчиков React, включая тех, кто работает с SPA. Новые хуки:
  • use(Promise)
  • use(Context)
  • Form Actions
  • useFormState
  • useFormStatus
  • useOptimistic
  • Async transitions (Асинхронные переходы)
Примечание: Эти хуки доступны только в канареечных и экспериментальных релизах React. Они должны стать частью предстоящего React 19, но API может измениться до финального релиза.

use(Promise)

Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по use React, выглядит следующим образом:
import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  // ...
}
Хорошая новость заключается в том, что этот хук можно использовать для получения данных. Вот конкретный пример с выборкой данных при монтировании и при нажатии на кнопку. В коде не используется ни один useEffect:
import { useState, use, Suspense } from 'react';

let news = ['news1', 'news2'];

const fetchNews = () => {
  return new Promise<string[]>((resolve) =>
    // имитация запроса данных
    setTimeout(() => {
      news = [...news, `news${news.length + 1}`];
      resolve(news);
    }, 500)
  );
}

const News = ({ newsPromise }) => {
  const news = use<string[]>(newsPromise);
  return (
    <ul>
      {news.map((title, index) => (
        <li key={index}>{title}</li>
      ))}
    </ul>
  );
};

export const App = () => {
  const [newsPromise, setNewsPromise] = useState(
    () => fetchNews()
  );

  const handleUpdate = () => {
    fetchNews().then((news) => {
      setNewsPromise(Promise.resolve(news));
    });
  };

  return (
    <>
      <button onClick={handleUpdate}>Обновить</button>
      <Suspense fallback={<p>Запрос данных...</p>}>
        <News newsPromise={newsPromise} />
      </Suspense>
    </>
  );
};
В ранних версиях было бы получено предупреждение, связанное с <Suspense>, т.к. требовалось чтобы компонент был lazy-loaded:
Suspense-enabled data fetching without the use of an opinionated framework is not yet supported.
Что ж, это уже не относится к React 19. Этот новый хук use имеет скрытую силу: в отличие от всех других хуков React, use может быть вызван в циклах и условных операторах, таких как if. Означает ли это, что нам больше не нужно использовать стороннюю библиотеку, такую как TanStack Query, для получения данных на стороне клиента? Что ж, это еще предстоит выяснить, поскольку Tanstack Query делает больше, чем просто разрешает Promise. Но это большой шаг в правильном направлении, и он упростит создание одностраничных приложений на основе REST API или GraphQL. Подробнее о хуке use(Promise).

use(Context)

Тот же use может быть использован для чтения React Context. Он точно такой же, как useContext, за исключением того, что его можно вызывать в циклах и условных операторах, таких как if.
import { use } from 'react';

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}
Это упростит иерархию компонентов для некоторых случаев, так как единственным способом чтения контекста в цикле или условном выражении было разделение компонента на две части. Это также большая эволюция с точки зрения производительности, так как теперь вы можете условно пропустить повторный рендеринг компонента, даже если контекст изменился. Подробнее о use(Context).

Form Actions

Эта новая функциональность позволяет передавать проп action в <form>. React вызовет эту функцию, когда форма будет отправлена:
<form action="{handleSubmit}" />
Помните, что если вы добавите <form action> в React 18, вы получите следующее предупреждение:
Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.
Это больше не касается React 19, где вы можете написать форму следующим образом:
import { useState } from 'react';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Корзина:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};
Функция addToCart не является серверным действием. Она вызывается на стороне клиента и может быть асинхронной функцией. Это значительно упростит обработку AJAX-форм в React - например, в форме поиска. Но опять же, этого может быть недостаточно, чтобы избавиться от сторонних библиотек, таких как React Hook Form, которые делают гораздо больше, чем просто обрабатывают отправку форм (проверка, побочные эффекты и т.д.). В приведенном выше примере вы можете найти некоторые проблемы с юзабилити (кнопка отправки не отключена при отправке, отсутствует сообщение с подтверждением, позднее обновление корзины). К счастью, в этом случае появляется все больше хуков. Подробнее о <form action>.

useFormState

Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.
import { useFormState } from 'react-dom';
import { action } from './action';

function MyComponent() {
  const [state, formAction] = useFormState(action, null);
  // ...
  return <form action={formAction}>{/* ... */}</form>;
}
Например, это позволяет отобразить подтверждение или сообщение об ошибке, возвращаемое действием формы:
import { useState } from 'react';
import { useFormState } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const addToCartAction = async (prevState, formData) => {
    try {
      await addToCart(formData, title);
      return 'Добавлено в корзину';
    } catch (e) {
      return "Невозможно добавить в корзину: товар распродан.";
    }
  };

  const [message, formAction] = useFormState(addToCartAction, null);

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>&nbsp;
      {message}
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    if (id === '1') {
      setCart((cart: Item[]) => [...cart, { id, title }]);
    } else {
      throw new Error('Unavailable');
    }

    return { id };
  };

  return (
    <>
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};
Примечание: useFormState должен быть импортирован из react-dom, а не react. Подробнее о useFormState.

useFormStatus

useFormStatus позволяет узнать, отправляет ли родительский элемент <form> в настоящее время или успешно выполнил отправку. Он может быть вызван из дочерних элементов формы, и он возвращает объект со следующими свойствами:
const { pending, data, method, action } = useFormStatus();
Свойство data можно использовать для отображения данных, отправляемых пользователем. Вы также можете отобразить состояние ожидания (pending), как в следующем примере, где кнопка отключена во время отправки формы:
import { useState } from 'react';
import { useFormStatus } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <SubmitButton />
    </form>
  );
};

const SubmitButton = () => {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Добавить в корзину
    </button>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise(
      (resolve) => setTimeout(resolve, 1000)
    );
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};
Примечание: useFormState должен быть импортирован из react-dom, а не react. Кроме того, он работает только тогда, когда родительская форма использует свойство action, описанное выше. Вместе с useFormState этот хук улучшит пользовательский опыт клиентских форм, не загромождая ваши компоненты бесполезными эффектами. Подробнее о useFormStatus.

useOptimistic

Эта новый хук позволяет оптимистично обновлять пользовательский интерфейс во время отправки действия.
import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimisti(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}
В приведенном выше примере c корзиной мы могли бы использовать этот хук для отображения корзины с новым элементом, добавленным до завершения AJAX вызова:
import { useState, useOptimistic } from 'react';

const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => {
  const formAction = async (formData) => {
    optimisticAddToCart({ id, title });
    try {
      await addToCart(formData, title);
    } catch (e) {
      // ошибка
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Добавить в корзину</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>(
    cart,
    (state, item) => [...state, item]
  );

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // имитация запроса
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={optimisticCart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
    </>
  );
};
Оптимистичное обновление пользовательского интерфейса — отличный способ улучшить взаимодействие с пользователем веб-приложения. В таком случае эти хуки очень помогают. Подробнее о useOptimistic.

Async Transitions (Асинхронные переходы)

React Transition API позволяет обновлять состояние, не блокируя пользовательский интерфейс. Например, он позволяет отменить предыдущее изменение состояния, если пользователь передумал. Идея состоит в том, чтобы обернуть изменение состояния вызовом startTransition.
function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    // вместо прямого вызова setTab(nextTab),
    // оберните изменение состояния в transition
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}
В следующем примере показана навигация по вкладкам с помощью Transition API. Нажмите «Сообщения», а затем сразу нажмите «Контакты». Обратите внимание, что это прерывает медленный рендеринг "Posts". Вкладка «Контакты» отображается сразу. Так как это обновление состояния помечено как переход, медленная повторная отрисовка не привела к зависанию пользовательского интерфейса.
import { useState, useTransition } from 'react';
import TabButton from './TabButton';
import AboutTab from './AboutTab';
import PostsTab from './PostsTab';
import ContactTab from './ContactTab';

export function App() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>
        О нас
      </TabButton>
      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
        Посты (медленное)
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        onClick={() => selectTab('contact')}
      >
        Контакты
      </TabButton>
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </>
  );
}
useTransition уже доступен в React 18.2. Что нового в React 19, так это то, что теперь вы можете передать асинхронную функцию startTransition, которую React ожидает для начала перехода. Это полезно для отправки данных с помощью AJAX вызова и визуализации результата в переходе. Состояние ожидания перехода начинается с асинхронной отправки данных. Он уже используется в описанной выше функции действий с формами. Это означает, что React вызывает обработчик <form action> обернутый в startTransition, поэтому он не блокирует текущую страницу.

Заключение

Все эти функции работают в клиентских приложениях React, например, в приложениях, поставляемых в комплекте с Vite. Для их использования вам не нужен SSR-фреймворк, такой как Next или Remix, хотя они также работают с серверными приложениями React. Благодаря этим функциям получение данных и формы становятся значительно проще для реализации в React. Однако создание отличного пользовательского опыта включает в себя интеграцию всех этих хуков, что может быть сложным. Почему эти функции появятся в React 19, а не в React 18.3? Похоже, что релиза 18.3 не будет, потому что эти функции включают в себя некоторые незначительные критические изменения. Когда выйдет React 19? Ожидаемого времени релиза пока нет, но все функции, упомянутые в этом посте, уже работают. Я бы пока не рекомендовал их использовать - использование канареечного релиза в продакшене не является хорошей идеей (даже если Next.js это сделает). Очень приятно видеть, что основная команда React работает над улучшением опыта разработки для всех разработчиков React, а не только для тех, кто работает над приложениями SSR. Кроме того, похоже, что они прислушиваются к отзывам сообщества - получение данных и обработка форм являются очень распространенными болевыми точками. По мотивам New client-side hooks coming to React 19

Чек-лист для ревью пулл-реквеста

год назад·1 мин. на чтение

Статья предлагает чеклист с основными пунктами, которые помогут провести эффективное ревью пулл реквестов и обеспечить качество кода перед мержем в основную ветку проекта

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

Функциональность

Проверьте, что код выполняет требования из задачи или спецификации. Убедитесь, что все функции работают корректно и не вызывают ошибок.

Архитектура и структура кода

Рассмотрите, соответствует ли код принципам SOLID и лучшим практикам проектирования. Проверьте, что код хорошо организован, читаем и понятен другим разработчикам.

Комментарии и документация

Проверьте наличие комментариев и документации. Комментарии должны быть четкими и информативными, а документация должна объяснять, как использовать код и его функции.

Тестирование

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

Надежность и безопасность

Рассмотрите код с точки зрения безопасности и надежности. Убедитесь, что применены соответствующие меры безопасности и механизмы обработки ошибок.

Производительность

Проверьте, что код работает эффективно и не содержит узких мест. Рассмотрите возможные оптимизации и их реализацию.

Стиль кода

Проверьте, соответствует ли код стандартам оформления и стилю, принятым в команде или проекте. Убедитесь, что переменные и функции имеют осмысленные имена, и что код написан согласно соглашениям о наименовании.

Зависимости

Убедитесь, что код правильно использует и управляет зависимостями. Проверьте версии и совместимость используемых библиотек.

Развертывание

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

Обратная связь

Не забывайте предоставлять конструктивную обратную связь разработчикам. Делитесь своими мыслями, идеями и предложениями по улучшению кода. Конечно, этот чеклист может быть адаптирован и дополнен в зависимости от специфики проекта и команды разработчиков. Главное - следовать основным принципам проведения ревью и стремиться к повышению качества кода.