Будущее React

Примет ли React сигналы?

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

• Сначала подытожим на примере, как React обновляет интерфейс — и где он теряет производительность.
• Посмотрим на ручное решение через memo и на его цену.
• Разберём философию команды React: почему сигналы для них — деталь реализации.
• Познакомимся с React Forget — компилятором, который должен решить задачу за нас.
• И честно взвесим Forget против сигналов — вместе со скепсисом автора книги.

Грубая реактивность на очень замысловатом примере

import React, { useState } from "react";
import { ComponentWithExpensiveChildren }
  from "./ExpensiveComponent";

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
      <ComponentWithExpensiveChildren />
    </div>
  );
}

memo работает — пока мы про него помним

Исправить это довольно легко: включаем memo в нужное время и в нужном месте.

import React, { useState, memo } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <MemoizedComponentWithExpensiveChildren />
    </div>
  );
}

const MemoizedComponentWithExpensiveChildren = memo(
  ComponentWithExpensiveChildren
);

Философия команды React

Многим кажется, что сигналы легко решили бы эту проблему. Но команда React в Meta считает, что сигналы, как и memo, могут быть деталями реализации, о которых обычным разработчикам задумываться не следует. Они прислушиваются к первоначальному ценностному предложению React.

Линтер с включённым флагом --fix

Forget — это набор инструментов для React, похожий на линтер с включённым --fix. Он применяет правила React, а затем автоматически преобразует код React в оптимальный, интеллектуально запоминая значения, которые не будут меняться на протяжении жизненного цикла приложения — такие как ComponentWithExpensiveChildren.

Именно благодаря правилам компилятор может предсказать неизменные значения и сохранить их в памяти за нас. Каковы эти правила?

• Компоненты React предполагаются чистыми функциями; некоторые хуки и пользовательские обработчики событий чистыми быть не обязаны.
• Запрещено: изменять переменные и объекты, которые не были созданы в функции заново; читать свойства, которые могут измениться.
• Разрешено: читать свойства или состояние; генерировать ошибки; мутировать вновь созданные объекты и привязки.
• Исключение: отложенная (ленивая) инициализация — здесь мутация с целью инициализации допускается.
• Объекты и замыкания, созданные во время рендеринга, не должны изменяться после его завершения — кроме изменяемых объектов, сохранённых в состоянии.

Forget против сигналов

На момент написания книги Forget был закрытым: он проходил оценку в Meta и превосходил ожидания по использованию в Instagram и WhatsApp, а команда рассматривала возможность выпустить его как open source. Судить о компромиссах авторитетно было сложно — но предположить можно.

Forget вырос в React Compiler

Это тот раздел книги, где проверка временем самая интересная: почти всё, что было «в оценке в Meta», уже случилось.

Куда React пошёл, кроме компилятора

Книга закрылась на Forget. За два года «будущее React» оказалось шире одного компилятора — и всё в том же направлении: не менять модель реактивности, а сокращать её издержки.

Пять вопросов главы 10

Вопросы из книги — по всей главе. Сначала обсуждаем, потом клик по вопросу раскрывает тезисный ответ.

Глава 10 — в пяти строках

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

• Пять альтернатив по отдельности: Vue, Angular, Svelte, Solid и Qwik — каждая со своей философией, своими реактивными примитивами и своими компромиссами.
• Общие шаблоны: компонентная архитектура, декларативный синтаксис, механизм обновлений, методы жизненного цикла и современный JS-инструментарий — у всех.
• React не реактивен в традиционном смысле: грубый подход «изменение состояния → повторный рендеринг» вместо детализированной модели Vue и Svelte.
• Будущее React — не сигналы, а компилятор: Forget автоматически оптимизирует код, запоминая неизменные значения; сегодня это стабильный React Compiler.
• Вывод для практики: универсального подхода нет — понимание различий помогает выбирать инструмент и писать более эффективный код на любом из них.