Octane: Inferno's Successor Compiles React's Programming Model Ahead of Time

Last updated: August 3, 2026

On August 3, Dominic Gannaway - creator of Inferno and a former React core contributor - released Octane, a new open-source UI framework that describes itself as "React's programming model, compiled." Version 0.1.23 is MIT-licensed, written in TypeScript, and requires Node.js 22 or newer. A compiler turns your React-style components into direct DOM code before they ship: no virtual DOM, no rules-of-hooks bookkeeping, and no dependency arrays maintained by hand. The project calls itself the successor to Inferno, and it is explicitly alpha, with a warning to pin versions in real projects.

What shipped#

The pitch is that your React knowledge transfers as-is. useState, useEffect, memo, context, portals, transitions, and Suspense all behave the way you expect, and a behavioral parity suite checks shared behavior against React case by case. The team reports 11,500+ test executions across the runtime, compiler, SSR, and bindings, with the core suite at 3,900+ distinct cases.

Three compiler-driven changes break from React conventions:

1. No rules of hooks. Hooks are tracked by call site, not call order, so a hook can live behind a condition or after an early return without shifting another hook's state. The one rule left is enforced as a compile error: a hook inside a plain JavaScript loop, because every iteration would share one call-site slot. The docs point to the keyed @for directive for that case, where each item gets its own hook state.

2. Dependency arrays are optional. Omit the array from useEffect, useMemo, useCallback, and the compiler derives it from what the closure actually captures, including stable setters, refs, and state getters. Explicit arrays still mean exactly what they mean in React.

3. .tsrx as a successor to JSX. A @{ ... } shorthand puts setup next to output, and template directives like @if, @for, @switch, and @try compile to keyed fast paths. Plain .tsx still works - paste a component from the React docs into a .tsx file and it runs - and you can mix both dialects in one app.

The async story gets the same treatment. Promises in render are safe without a cache() wrapper: creations feeding use() are memoized at their declarations, independent requests start together, and descendant fetch trees prefetch while an ancestor is still suspended. Streaming SSR flushes out-of-order Suspense boundaries over Node or web streams with byte-stable hydration, and a <Hydrate> component keeps server HTML visible but inert until hydration is worth it.

The framework is deliberately narrow where React has grown wide: no class components, no Server Components, no synthetic event system. Events are native and delegated, refs are plain props, and useState and useReducer return a third element - a current-state getter - so a delayed callback can read the latest value instead of a stale capture.

The benchmark grid, honestly#

Octane publishes a self-measured benchmark suite comparing against React 19, Preact 10, Solid 2.0 beta, Svelte 5, Ripple 0.3, and Vue Vapor 3.6 beta across 16 suites. On the geometric mean, with Octane at 1x: React 19 runs 2.9x, Preact 10 2.7x, Svelte 5 1.3x, Solid 2.0 beta 1.1x, Ripple 0.3 1.1x - and Vue Vapor 3.6 beta comes in at 0.86x, meaning Vapor leads the geomean. The per-suite spread matters: Octane wins handily on chat-stream (React 3.8x) and portal-swarm (React 7.6x, Preact 9.6x), while Vapor wins memo-wall and signal-favoring. And the bundle-size row shows Octane larger than the signal-based competition: Preact at 0.57x, Solid at 0.69x, Vue Vapor at 0.69x, Svelte at 0.81x of Octane's payload.

Read that grid as "roughly par with the signal frameworks, clearly faster than React and Preact on most operations, and heavier on the wire" - not as a universal win. The suite is the project's own, and the honest framing is that the numbers are the team's, measured by the team.

Why this matters to developers#

This is the same wave as the TypeScript 7 native compiler and Vercel's ScriptC: move bookkeeping from runtime or lint time to compile time, and let the tooling own the invariants humans keep getting wrong. Rules-of-hooks violations and stale dependency arrays are a classic class of frontend bugs - and a classic class of AI-agent-generated bugs, because agents frequently produce hooks behind conditions or omit captures from dependency lists. A compiler that keys hooks by call site and infers captures removes that failure class at the source. The docs make the agent angle explicit: components keep their shape through migration, so "AI agents can migrate an app too, without redesigning it around a new reactive model."

Adoption is incremental by design. octane/react exports a single OctaneCompat component that hosts a compiled Octane island inside a real React 19 tree - port a widget, a screen, or one component, and leave the rest as React. Scaffolding is one command (npm create octane my-app with spa and fullstack templates), and a CLI wires up an existing Vite project including the TypeScript settings .tsrx needs.

The honest limits: it is alpha software, the .tsrx editor extension is not published yet, and 53 first-party bindings - state, data, routing, forms, charts, 3D - are a long way from the React ecosystem's depth. If you benchmark against what Web Dev Arena measures - real UI work that agents and teams ship - the compile-ahead model is worth a test run, especially for agent-heavy teams. Framework rebuilds have been the theme of the season, from Shopify's Hydrogen to Astro's Rust-native toolchain; Octane is the first serious React-API-compatible compiler in that line.

FAQ#

What is Octane?#

Octane is an open-source, MIT-licensed UI framework from Dominic Gannaway, the creator of Inferno, that describes itself as "React's programming model, compiled." A compiler turns React-style components into direct DOM code, with no virtual DOM. It is explicitly alpha, and the project warns to pin versions in real projects.

Does Octane still have the rules of hooks?#

Mostly no. Hooks are tracked by call site rather than call order, so a hook can sit behind a condition or after an early return. The one remaining rule is enforced as a compile error: a hook inside a plain JavaScript loop, where the docs point to the keyed @for directive instead.

Do I need dependency arrays in Octane?#

They are optional. If you omit the array from useEffect, useMemo, or useCallback, the compiler derives it from what the closure actually captures. Explicit arrays still mean exactly what they mean in React.

Can I use Octane inside an existing React app?#

Yes. octane/react exports an OctaneCompat component that hosts a compiled Octane island inside a real React 19 tree, so you can port a widget, a screen, or one component and leave the rest as React.

Is Octane faster than React?#

On Octane's own self-measured benchmark suite, React 19 runs 2.9x and Preact 10 runs 2.7x on the geometric mean with Octane at 1x, while Vue Vapor 3.6 beta leads the geomean at 0.86x. Octane's bundle is larger than the signal-based frameworks, and the numbers are the team's own.

Continue Reading#

• TypeScript 7 Native Compiler Migration Guide - the other big compile-ahead rewrite and how to move to it
• Vercel ScriptC: A TypeScript Native Compiler - compiler-first TypeScript tooling in the same wave
• Web Dev Arena: How to Test AI Coding Models on Real Frontend Work - judging frontend frameworks and agents on real UI output
• Astro 7, Rust, and Vite 8: What the Release Means - native toolchain rewrites in the meta-framework space
• Shopify Is Rebuilding Hydrogen Framework-Agnostic - why storefront teams are rethinking their framework bets
• Kombai: AI That Beats Claude and Gemini on Front-End Tasks

Sources#

• Octane: React's programming model, compiled (docs, benchmark grid; fetched August 3, 2026)
• octanejs/octane on GitHub (README, MIT license, releases, commit history)
• octane on npm (version 0.1.23, published August 2, 2026)