‏TanStack Redact: یه نسخه‌ی سبک‌تر از React برای TanStack Start

یکی از دردسرهای کار با TanStack Start اینه که React به تنهایی حدود ۶۰ کیلوبایت gzip روی کلاینت می‌شه — قبل از اینکه حتی یه خط از کد اپ بارگذاری بشه. در مقابل، بقیه‌ی اکوسیستم TanStack (Router، Query، Store، Form، Virtual) روی هم از این عدد خیلی کمتره. این تناسب درستی نبود: کوچک‌ترین چیزی که نمی‌شه حذفش کرد، بزرگ‌ترین وابستگی استکه.

اولین گزینه Preact بود، ولی preact/compat دیگه با React 19 به‌اندازه‌ی کافی هماهنگ نیست. مشکلات ریز روی use()، server actions، error boundaries و hydration یکی‌یکی اضافه شدن و هر پچ روی پچ قبلی سوار شد. بعد از پنجمین وصله، سازنده متوقف شد و به یه ایده‌ی بزرگ‌تر رسید: API عمومی React خودش «جدول پایه» است، نه یه پیاده‌سازی خاص.

ایده اینه که model ری‌اکت — سیستم المنت‌ها، قرارداد hooks، سمانتیک Suspense، پروتکل SSR streaming — طی یه دهه تثبیت شده. ولی پیاده‌سازی رسمی React برای چیزهایی بهینه شده که TanStack Start بهشون نیاز نداره: concurrent mode، time slicing، DevTools، و یه Runtime کامل React Server Components. پس چرا نشه یه پروجکشن دیگه از همون API ساخت؟ نسخه‌ای که دقیقاً به اندازه‌ی نیاز TanStack Start باشه؟

نتیجه ابزاریه به اسم @tanstack/redact که در یک روز با کمک یه agent هوش مصنوعی ساخته شد. این پروجکشن همه‌ی چیزهایی که همیشه لازمه رو داره: fiber reconciler با keyed child diffing، DOM mount/update، هوک‌های استاندارد (useState، useEffect، useRef و...)، JSX runtime، Fragment و native event binding — همه در یه core به حجم ۷.۰۸ کیلوبایت gzip. قابلیت‌هایی مثل Suspense، context، portal، memo، hydration و class components به صورت ماژولار قابل فعال یا غیرفعال‌کردنن. concurrent rendering، time slicing و React DevTools اصلاً پیاده‌سازی نشدن چون TanStack Start بهشون نیاز نداره.

دو preset وجود داره که از طریق پلاگین Vite تنظیم می‌شن:

import { redact } from '@tanstack/redact/vite'

redact({ preset: 'full' })  // 9.39 KB: drop-in React، opt OUT هر چی نمی‌خوای
redact({ preset: 'nano' })  // 7.08 KB: core کمینه، opt IN هر چی می‌خوای

پلاگین Vite به ازای هر feature غیرفعال، فایل index.js رو با stub.js جایگزین می‌کنه. این یعنی کد اون قابلیت اصلاً وارد module graph نمی‌شه و tree-shaking کامل انجام می‌شه — بدون تغییر در کد کاربر و بدون branching در زمان اجرا. یه نکته‌ی مهم هم اینه که RSC کار می‌کنه: این پروجکشن با react-server-dom واقعی برای Flight serialization کار می‌کنه و tanstack.com یه blog و docs renderer مبتنی بر RSC رو از طریق همین ستاپ اجرا می‌کنه.

نکات کلیدی:

• React حدود ۶۰ کیلوبایت gzip روی کلاینت اضافه می‌کنه که برای TanStack Start بیشتر از نیازه
• Preact/compat دیگه drop-in کامل برای React 19 نیست
• @tanstack/redact یه پیاده‌سازی جدید از API عمومی React با دو حالت full (9.39 KB) و nano (7.08 KB) است
• قابلیت‌هایی مثل Suspense، context، hydration و memo به‌صورت ماژولار قابل فعال/غیرفعال کردن هستن
• concurrent rendering، time slicing و React DevTools اصلاً پیاده‌سازی نشدن
• RSC با react-server-dom واقعی کار می‌کنه و tanstack.com در حال حاضر روی این ستاپ اجراست
• کل این ابزار در یک روز با کمک یه AI agent ساخته شد