Полезные видео о фронтенде. Подпишись на Rutube

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

10 месяцев назад·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

Frontend React React hooks

Видео-курс по Redux

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

Видео-курс по Redux, в котором разбираемся как работать с Redux в React приложении.

1. Все что нужно знать о Redux

Это видео - быстрый старт в Redux, и оно поможет понять все основные концепции Redux. Здесь мы разберем что такое Redux, основные понятия Redux и три его принципа. Поговорим об Actions, Dispatch, Reducer, Store и узнаем о Redux data flow. Смотреть на Rutube

2. Добавляем Redux в React приложение быстро: `useSelector`, `useDispatch`

В этом видео добавляем Redux в ReactJS приложение todo app. Пишем редьюсеры (reducers) и диспатчим экшены (dispatch actions). Используем redux hooks API, такие как useSelector, useDispatch. Смотреть на Rutube

3. Что такое Action Creator в Redux?

В этом видео пишем action creators в React Redux приложении и используем их в dispatch. Пишем функцию для создания action creators. Смотреть на Rutube

4. Что такое Redux Middleware?

В этом видео разбираем middleware в Redux. Пишем кастомные middleware для логирования и отложенного выполнения действия. Смотреть на Rutube

5. Функция next в Redux Middleware

В этом видео подробно разбираем функцию next в middleware Redux, смотрим как получить значение возвращенное из dispatch и пишем функцию для получения значений всех middleware. Смотреть на Rutube Исходный код

Frontend React Redux Видео-курс