Главная / Статьи / Будущее React: какие паттерны выживут до 2030 года

Будущее React: какие паттерны выживут до 2030 года

Узнайте, какие функции React, такие как серверные компоненты и компилятор, являются постоянными, а какие паттерны, такие как Redux и CSS-in-JS, постепенно уходят в прошлое.

784 слов

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

Что уже зафиксировано

React не случайно пришел к своему нынешнему виду. Функции Actions, API use для получения значений обещаний и контекста во время отрисовки, рассмотрение ref как обычного атрибута, а также стабильные серверные компоненты сейчас являются основой фреймворка — ни один из этих элементов не будет устранен в будущих версиях.

  • Компоненты сервера больше не являются экспериментальными — они стали стандартом. React Server Components позволяют отображать интерфейс полностью на сервере, что означает меньше JavaScript, отправляемого в браузер, и сейчас большинство фреймворков включают это по умолчанию.
  • Компилятор перешел от статуса исследовательского проекта к инструменту для производственного использования. С выходом версии 1.0 идея написания обычного кода, а компилятору — заниматься мемоизацией и оптимизацией, теперь стала реальностью, с которой работают команды, а не просто теорией, о которой они читают.
  • Управление проектом никогда не было стабильнее. React перешел в ведение независимого React Foundation, находящегося под эгидой Linux Foundation, что свидетельствует о том, что будущее проекта больше не зависит от какого-либо одного решения, принятого внутри Meta.
// app/products/page.tsx — Server Component, no client bundle cost
import { getProducts } from "@/lib/db";

export default async function ProductsPage() {
  const products = await getProducts(); // runs on the server, not the browser
  return (
    <section>
      <h1>Our Products</h1>
      <ul>
        {products.map((p) => (
          <li key={p.id}>{p.name} — ${p.price}</li>
        ))}
      </ul>
    </section>
  );
}

Что постепенно исчезает

  • Redux в качестве стандартного контейнера состояния. Когда компоненты сервера отвечают за загрузку данных, операции сервера обрабатывают изменения состояния, а URL управляет фильтрацией и пагинацией, практически не остаётся причин для использования глобального хранилища состояния на стороне клиента.
  • Решения типа CSS-in-JS. Библиотеки вроде Emotion и styled-components сейчас находятся в режиме обслуживания, поскольку они плохо совместимы с моделью серверной отрисовки, на которой основаны Server Components.
  • Собственные библиотеки компонентов с нуля. Подход, популяризированный shadcn/ui в сочетании с Radix — при котором код компонентов копируется непосредственно в собственный репозиторий вместо установки нечитаемого пакета — стал отправной точкой для большинства команд, разрабатывающих продукты.
// Lightweight client state — this is basically all Redux gets used for now
import { create } from "zustand";

const useCartDrawer = create<{ open: boolean; toggle: () => void }>((set) => ({
  open: false,
  toggle: () => set((s) => ({ open: !s.open })),
}));

Что это означает для 2030 года

  • Немедленно привыкните к подходу, ориентированному на сервер. Загрузка данных внутри компонента, который никогда не отправляется на клиент, больше не будет какой-то передовой техникой — это просто стандартное требование.
  • Перестаньте по привычке обращаться к глобальному состоянию. Прежде чем использовать хранилище данных, спросите себя, действительно ли эти данные должны находиться на сервере, в URL или внутри формы.
  • Tailwind не исчезает — он становится стандартом. Благодаря движку на базе Rust и отсутствию необходимости в отдельной обработке с помощью PostCSS, Tailwind уже давно стал стандартным инструментом для стилизации в большинстве новых проектов на React.
  • TypeScript больше не является опцией. Любая команда, разрабатывающая что-то серьезное, сейчас просто использует его в качестве стандарта, а не как дополнительный шаг.

Стоит также отметить, что React 20 не грядёт в ближайшее время. Экосистема достигает зрелости, вместо того чтобы спешить к следующему большому номеру версии, и это, пожалуй, признак здоровья, а не застоя.

Итоги

React в 2030 году не станет совершенно другой фреймворком — он будет сохранять те же основные принципы, без лишних компонентов, которые были необходимы только потому, что технология серверной отрисовки ещё не была разработана до конца. Получение данных с сервера в первую очередь, минимальная зависимость от состояния на клиенте и компилятор, который автоматически выполняет оптимизацию, раньше требовавшую ручного вмешательства, — это не гипотетические тенденции; это привычки, которые стоит формировать уже сейчас. React, который останется актуальным через пять лет, будет тем же, каким он является сегодня, только с более отшлифованными недостатками.

Связанная литература