TanStack Redact: сверхлегкая синхронная альтернатива React для браузерного рендеринга

В непрекращающейся борьбе за показатели Core Web Vitals и мгновенную отзывчивость веб-приложений фронтенд-инженеры неизбежно упираются в «налог на рантайм». Классическая связка пакетов react и react-dom даже в сжатом виде весит около 45–50 КБ gzip. В мобильных сетях и на бюджетных смартфонах загрузка и парсинг этих скриптов отнимают драгоценные доли секунды до появления первого интерактивного экрана (Time to Interactive).

Исторически эту проблему решали переходом на Preact, однако при работе с современными экосистемами вроде React 19 и мета-фреймворками совместимость периодически давала сбои. Создатель библиотеки TanStack Query Таннер Линсли представил радикальный эксперимент — ультралегкую клиентскую замену TanStack Redact, о которой подробно рассказано в документации TanStack Redact.

Анатомия Redact: отказ от Fiber ради легковесности

Главная идея Redact — бескомпромиссное сокращение размера клиентского бандла (экономия от 20% до 70% по сравнению с оригиналом). Библиотека проектировалась как прозрачная замена (drop-in replacement): ты не переписываешь ни строчки кода своих компонентов, а просто перенаправляешь алиасы в сборщике:

// vite.config.ts: подмена стандартного React на сверхлегкий рантайм Redact
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react': '@tanstack/redact',
      'react-dom': '@tanstack/redact/dom',
      'react-dom/client': '@tanstack/redact/dom/client',
      'react/jsx-runtime': '@tanstack/redact/jsx-runtime',
    },
  },
});

Redact эмулирует практически все ключевые хуки (useState, useEffect, useMemo, useCallback, useTransition), поддерживает порталы и базовый Suspense. Однако эта миниатюрность достигнута за счет устранения ключевой архитектурной основы React 18/19 — волоконного планировщика Fiber и механизма квантования времени (Time Slicing).

Цена синхронности: нагрузка на процессор

В React 19 рендеринг конкурентен: если во время сложного обновления пользователь кликает по кнопке, браузер прерывает отрисовку и отдает приоритет вводу. В TanStack Redact рендеринг строго синхронен: любое изменение состояния немедленно и непрерывно пересчитывает поддерево DOM сверху вниз:

import React, { useState, useEffect } from 'react';

export function RealtimeFilter() {
  const [query, setQuery] = useState('');

  // В Redact каждое нажатие клавиши вызывает моментальный синхронный цикл рендера
  useEffect(() => {
    console.log('Синхронный эффект сработал сразу после обновления DOM');
  }, [query]);

  return (
    <div className="filter-box">
      <input 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
        placeholder="Поиск по таблице..." 
      />
    </div>
  );
}

Независимые замеры на реальных приложениях показывают суровую правду: при частых каскадных обновлениях (динамические фильтры, активные анимации, непрерывный ввод) Redact расходует вдвое больше процессорного времени (CPU time), чем стандартный React. Отсутствие интеллектуального батчинга нагружает главный поток (Main Thread), ухудшая метрику взаимодействия с пользователем (INP).

В связке с современным фреймворком TanStack Start Redact отлично подойдет для контентных лендингов и дашбордов с редкими обновлениями, где важен каждый килобайт при старте. Но для тяжелых веб-приложений с насыщенной интерактивностью оригинальный React Fiber по-прежнему остается непревзойденным стандартом.