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

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

Как переключать css класс в React

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

В этой статье рассмотрим, как динамически переключать css классы в приложении React.

Переключение ccs классов

Чтобы переключить css класс, нам нужно использовать логическое значение, например, в тернарном выражении.
  • Если логическое значение true, имя класса добавляется к элементу react.
  • Если логическое значение false имя класса удаляется из элемента react.
Ниже приведен пример, в котором используются React хуки, которые добавляют css класс app в элемент div, когда мы нажимаем кнопку Toggle class. Если мы нажмем эту кнопку еще раз, имя класса будет удалено из элемента div.
// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : null}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}
В компонентах, основанных на классах, вы можете сделать это следующим образом.
// App.js

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = { isActive: false };

  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });
  };

  render() {
    const isActive = this.state.isActive;
    return (
      <div className={isActive ? "app" : null}>
        <h1>Hello react</h1>
        <button onClick={this.handleToggle}>Toggle class</button>
      </div>
    );
  }
}

export default App;

Переключение между двумя именами классов

Вместо того, чтобы добавлять или удалять имя класса, мы также можем переключаться между двумя именами классов в приложении React. В приведенном ниже примере по умолчанию класс container добавляется в элемент div, когда мы нажимаем кнопку Toggle class класс container удаляется, а класс app добавляется к элементу.
// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : "container"}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Добавление имени класса к существующему имени класса

Вы также можете добавить новое имя класса к существующему имени класса следующим образом.
// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={`app ${isActive ? "danger" : ""}`}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}
Первоначальный вид html разметки:
<div class="app">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>
После нажатия кнопки Toggle class html выглядит следующим образом.
<div class="app danger">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>