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

[kirilljs]

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

Самое крутое, что теперь можно забыть про кучу сторонних библиотек для работы с формами и данными. Все необходимое теперь есть прямо в React “из коробки”.

Расскажу подробнее про use(Promise) - он реально меня удивил своей простотой. Раньше приходилось городить конструкции с useState и useEffect для обработки асинхронных операций, а теперь все становится намного элегантнее.

Вот пример использования:

import { use } from 'react';

function Post({ id }) {
  const post = use(fetchPost(id)); // Приостанавливает рендеринг до получения данных
  return <article>{post.title}</article>;
}

// Где-то выше в компоненте-родителе:
<Suspense fallback={<LoadingSpinner />}>
  <Post id={postId} />
</Suspense>

Обратите внимание, насколько это просто: мы просто вызываем use() с промисом, и React сам позаботится о приостановке рендеринга до получения данных. А благодаря Suspense мы можем легко показать загрузчик.

Что мне особенно нравится:

• Код стал более декларативным
• Нет необходимости вручную отслеживать состояния загрузки
• Исчезает "callback hell" и сложные цепочки промисов

Например, раньше пришлось бы писать что-то вроде:

function Post({ id }) {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchPost(id)
      .then(data => {
        setPost(data);
        setLoading(false);
      })
      .catch(error => console.error(error));
  }, [id]);

  if (loading) return <LoadingSpinner />;
  return <article>{post.title}</article>;
}

Как видите, новый подход гораздо компактнее и понятнее. Больше никаких лишних состояний и эффектов!

Если у кого-то есть опыт использования этих новых хуков или вопросы по ним - давайте обсудим в комментариях! Особенно интересно было бы узнать, как эти изменения повлияли на ваши проекты.

P.S. Про остальные новые хуки тоже планирую написать подробнее, ниже в этой теме .

[kirilljs]

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

Упрощённая передача ref

Раньше, чтобы передать ref в компонент, нужно было оборачивать его в forwardRef. Это создавало дополнительный уровень сложности и увеличивало объём кода. В React 19 всё стало гораздо проще — теперь можно передавать ref как обычное свойство!

Пример:

function CustomButton({ ref }) {
  return <button ref={ref}>Нажми меня</button>;
}

// Использование:
<CustomButton ref={myButtonRef} />;

Теперь не нужно думать о том, как правильно обернуть компонент или следить за тем, чтобы ref был корректно передан. Код стал понятнее и короче. Особенно это полезно для небольших компонентов, где использование forwardRef раньше казалось избыточным.

Поддержка метаданных

Ещё одно долгожданное изменение — возможность напрямую управлять метатегами (<title>, <meta>, <link>) прямо внутри компонентов. Раньше для этого приходилось использовать сторонние библиотеки, такие как react-helmet. Теперь всё это доступно “из коробки”.

Пример:

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="description" content={post.summary} />
      <meta name="keywords" content={post.tags.join(', ')} />
      <p>{post.content}</p>
    </article>
  );
}

Это особенно удобно для управления SEO-данными. Например, если вы пишете блог или новостной сайт, теперь можно легко динамически обновлять заголовки и метатеги на основе данных, полученных от сервера. Плюс ко всему, это работает быстрее, чем через сторонние решения.

Оптимизированная обработка ошибок

Ошибки — это неизбежная часть разработки, но React 19 сделал их обработку намного удобнее. Теперь сообщения об ошибках стали более информативными и компактными. Система отображает только одно четкое сообщение, что помогает быстрее находить и исправлять проблемы.

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

Error: Cannot read properties of undefined (reading 'map')
Component: BlogPost
Location: src/components/BlogPost.js:25

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

Личные впечатления

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

• Упрощённая работа с ref: больше никаких лишних обёрток, всё просто и интуитивно.
• Метаданные: теперь можно забыть про react-helmet и подобные библиотеки. Всё необходимое есть в React.
• Обработка ошибок: более чёткие сообщения помогают быстрее находить проблемы, а это экономит кучу времени.

Если у вас есть опыт использования этих фич или вопросы по ним — пишите в комментариях! Интересно узнать, как эти изменения повлияли на ваши проекты.