تصور کنید در محیطی کد می‌زنید که دیگر «قوانین هوک‌ها» یا آرایه‌های محدودکننده، زنجیر دست شما نباشند. این واقعیتِ Octane است؛ چارچوبی کامپایل‌شده که در ۳ آگوست ۲۰۲۶ عرضه شد تا با انتقال محاسبات سنگین به مرحله‌ی کامپایل، هزینه‌ی پردازشی DOM مجازی (Virtual DOM) را به‌طور کامل حذف کند.
زمینه
برای سال‌ها، صنعت نرم‌افزار میان مدل ذهنی بصری React و سرعت خالص چارچوب‌های مبتنی بر سیگنال‌ها مردد بود. Octane تلاش می‌کند این دوگانگی را از بین ببرد. در این سیستم، کامپوننت‌ها مانند توابع ساده‌ای هستند که از بالا به پایین خوانده می‌شوند، اما یک کامپایلر به‌طور خودکار ردیابی می‌کند که کدام وضعیت‌ها (state captures) در کجا مورد استفاده قرار گرفته‌اند.
در حالی که سیگنال‌ها ابزاری معتبر برای حجم‌های کاری خاص هستند، Octane چارچوب‌های «فقط-سیگنال» را رد می‌کند؛ زیرا این رویکرد هر اپلیکیشنی را مجبور می‌کند تا وضعیت را به یک شکل واحد نمایش دهد و بخواند. در عوض، Octane مدل آشنای React را حفظ کرده است: هوک‌ها، memo، context، پورتال‌ها، transitions، اکشن‌ها، فرم‌های کنترل‌شده و Suspense همگی دقیقاً همان‌طور که انتظار می‌رود رفتار می‌کنند. در واقع، کامپایلر کارهای اضافی را انجام می‌دهد تا کد توسعه‌دهنده مجبور به انجام آن‌ها نباشد.
طبق مستندات octanejs.dev، این چارچوب برای فعال‌سازی بهینه‌سازی‌های کامپایل‌شده، پسوند جدید .tsrx را معرفی کرده است. با این حال، فایل‌های .tsx معمولی همچنان پشتیبانی می‌شوند تا تیم‌ها بتوانند کامپوننت‌ها را یکی‌یکی و به‌صورت تدریجی به فرمت جدید منتقل کنند.
جزئیات
به نقل از تیم توسعه، پیشرفت‌های فنی کلیدی این پروژه شامل موارد زیر است:
- حذف DOM مجازی: قالب‌ها به گره‌های شبیه‌سازی‌شده (cloned nodes) و نوشتن‌های مستقیم در DOM تبدیل می‌شوند. در این سیستم، لیست‌های کلیددار
@forتنها کمترین تعداد گره ممکن را جابه‌جا می‌کنند. - هوک‌های منعطف: حالا می‌توان هوک‌ها را پشت شرط‌ها یا بعد از بازگشت‌های زودهنگام (early returns) قرار داد. این امکان به این دلیل فراهم شده است که اسلات‌ها (slots) بر اساس محل فراخوانی (call site) تخصیص می‌یابند، نه بر اساس ترتیب فراخوانی.
- وابستگی‌های خودکار: کامپایلر به‌طور خودکار استنباط می‌کند که کدام افکت‌ها، memoها و callbackها واقعاً از چه متغیرهایی استفاده می‌کنند و نیاز به مدیریت دستی آرایه‌های وابستگی را به‌طور کامل حذف می‌کند.
- بهبود عملیات ناهمگام (Async): فراخوانی‌های مستقل
use()به‌جای اینکه تک‌تک و به‌صورت متوالی در درخت معلق (suspend) شوند، به‌طور هم‌زمان آغاز می‌شوند. همچنین Fetchهای تودرتو زودتر گرم (warm up) می‌شوند و SSR استریمینگ هر مرز (boundary) را به محض آماده شدن ارسال می‌کند. - یکپارچگی بومی: رویدادها به‌صورت بومی (native) هستند و refها صرفاً مانند propهای ساده رفتار می‌کنند.
برای تضمین پایداری، تیم توسعه بیش از ۱۱,۵۰۰ اجرای تست را در محیط زمان اجرا (runtime)، کامپایلر، SSR و Bindingها پیاده‌سازی کرده است. این مجموعه شامل بازاجرای حالت‌های کامپایلر است که در آن یک مجموعه هسته، بیش از ۳,۹۰۰ مورد مجزا را پوشش می‌دهد و پوشش‌های مشتق‌شده از React مورد به مورد ردیابی شده‌اند.
اکوسیستم این ابزار توسط ۵۳ اتصال (Binding) رسمی برای مدیریت وضعیت، داده‌ها، مسیریابی، UI، فرم‌ها، نمودارها، گرافیک سه‌بعدی و موارد دیگر پشتیبانی می‌شود. این شامل یک پیش‌نمایش فنی از React Three Fiber از طریق پکیج @octanejs/three است.
مهاجرت و پیاده‌سازی
مسیر مهاجرت به‌گونه‌ای طراحی شده که ریسک کمی داشته باشد. توسعه‌دهندگان از طریق OctaneCompat می‌توانند «جزیره‌های» کامپایل‌شده را در یک اپلیکیشن موجود React 19 قرار دهند. این جزیره‌ها context واقعی React را با استفاده از use() ساده می‌خوانند، رویدادهای تفویض‌شده بومی (native delegated events) را حفظ می‌کنند و بدون نیاز به بازنویسی کل برنامه، در سمت کاربر (Client) هایدریت (hydrate) می‌شوند.
نکته حیاتی این است که تقریباً همه چیز منتقل می‌شود—از جمله هوک‌ها، Suspense، context و SSR—و تنها استثنای این سازگاری، React Server Components است.
با این حال، چون Octane پیش از اجرا (Ahead-of-Time) کامپایل می‌شود، برخی پیکربندی‌های اشتباه به‌جای ایجاد خطاهای سخت (hard errors)، باعث کاهش عملکرد می‌شوند. این منجر به «اشتباهاتی می‌شود که به‌صورت خاموش شکست می‌خورند»، مانند:
- تکرار Runtime: وجود دو نسخه از Runtime در یک درخت باعث می‌شود هوک‌ها و context به‌صورت خاموش خراب شوند، زیرا وضعیت هوک‌ها برای هر نمونه از Runtime کلیدگذاری شده است.
- خطاهای تایپی: ابزار
tscمعمولی در مدیریت فایل‌های.tsrxمشکل دارد. برای جلوگیری از اینکه کامپوننت‌ها به‌عنوانanyشناخته شوند، استفاده از یک shim مانندdeclare module '*.tsrx'ضروری است.
برای مقابله با این مسائل، CLI ابزارهای تخصصی ارائه می‌دهد. دستور octane doctor حدود ۲۰ بررسی (شامل محدوده peer در Vite و منبع واردات JSX) را برای یافتن نقاط شکست انجام می‌دهد و دستور octane doctor --fix یافته‌ها را ترمیم می‌کند. سایر دستورات عبارتند از: octane init برای پروژه‌های جدید، octane explain 3 برای رمزگشایی خطاهای minified در محیط Production، و octane mcp add برای ارائه ابزارها به عوامل کدنویسی (coding agents).
این تغییر، حرکتی به سمت زیرساخت‌های «نامرئی» است. Octane ثابت می‌کند که می‌توان APIهای React را حفظ کرد اما موتور زیرین را برای رسیدن به حداکثر سرعت تعویض نمود، بدون آنکه تجربه توسعه‌دهنده فدا شود. در واقع، این ابزار کامپایلر را به منبع اصلی حقیقت برای ردیابی وضعیت تبدیل می‌کند.
برای کسانی که در حال مقیاس‌بندی رابط‌های کاربری پیچیده هستند، این بدان معناست که «قوانین هوک‌ها» در حال تبدیل شدن به یک محدودیت قدیمی (legacy) هستند، نه یک الزام. هزینه پذیرش این فناوری اکنون تنها چند دستور CLI و تغییر یک پسوند فایل است، نه یک چرخش معماری کامل به سمت سیگنال‌ها.
گام بعدی شما
- اگر پروژه بزرگی با React 19 دارید، ابتدا یک بخش کوچک از UI را به
.tsrxمنتقل کنید و تفاوت سرعت رندر را بسنجید. - ابزار
octane doctorرا در خط فرمان اجرا کنید تا از صحت پیکربندی Vite و JSX در پروژه خود مطمئن شوید. - مستندات
@octanejs/threeرا برای پیاده‌سازی گرافیک سه‌بعدی با عملکرد بالاتر بررسی کنید.
اما تأثیر این حذف DOM مجازی بر مصرف حافظه در دستگاه‌های ضعیف‌تر، موضوعی است که در بررسی‌های بعدی به آن خواهیم پرداخت.
گفتگو