Octane — React's programming model, compiled<br>Search docs⌘/Ctrl K

React’s programming model, compiled.<br>The successor to Inferno, carrying its performance-first goal forward: React’s hooks, Suspense and actions, compiled ahead of time. No virtual DOM. No rules of hooks. No hand-maintained dependency arrays — the compiler works out what your code captures for you.

Get started

Differences from React

Counter.tsrxCopy<br>// Counter.tsrx — hooks next to output, no rules of hooks<br>import { useState, useEffect } from 'octane';

export function Counter(props) @{<br>const [count, setCount] = useState(0);

// A hook behind a condition is fine — slots are<br>// assigned by call site, not call order.<br>if (!props.paused) {<br>useEffect(() => {<br>console.log('count is now', count);<br>}); // the compiler infers [count]

button onClick={() => setCount(count + 1)}>{'Count: ' + count}button><br>LiveCount0paused// count is now 0

No dependency arrays and no rules of hooks. The compiler tracks what your effects, memos and callbacks actually use, and hooks can sit behind conditions or early returns.

Independent use() calls start together instead of suspending one at a time down the tree. Nested fetches warm up early, and streaming SSR sends each boundary as soon as it’s ready.

Templates compile to cloned nodes and direct DOM writes, and keyed @for lists move the fewest nodes possible. Plain .tsx still works, so you can adopt .tsrx one component at a time.

Hooks, memo, context, portals, transitions, actions, controlled forms and Suspense all behave the way you expect. Events are native, refs are just props, and 42 first-party bindings cover the libraries you already use.

11,500+test executions across the runtime, compiler, SSR and bindings, including compiler-mode reruns; the core suite has 3,900+ distinct cases. React-derived coverage is tracked case by case<br>rules of hooks — put them behind conditions or after an early return

42first-party ecosystem bindings for state, data, routing, UI, forms, charts, 3D, and more

Fast should be how your app feels. Not a new way you have to think.<br>Why would I move my app to Octane?<br>Octane components are the components you already write. They are plain functions with hooks, props, and context. If you know React, you know Octane. Your instincts about where state lives and how data flows carry over on day one.<br>You don’t have to rewrite your app to adopt it. Keep your existing TSX, move components to TSRX one at a time, and ship the whole way. Components keep their shape along the way, so AI agents can migrate an app too, without redesigning it around a new reactive model.

Why isn't Octane built on signals?<br>Signals are a good tool, and you can still use them in an Octane app when they fit. But a framework built on signals makes every app represent and read state the signals way. Octane keeps components as plain functions that read from top to bottom. The compiler does the extra work, so your code doesn’t have to.

The trade holds up. Signals still win the workloads built for them. Across the checked-in suites below, Octane keeps pace without asking you to rewire how you think.<br>See what TSRX adds →

The libraries you already use, ported.

Incrementally migrate. With OctaneCompat.<br>Already have a React 19 app? Drop compiled Octane islands into it with a single component. Events stay native and delegated, islands read your real React context with plain use(), and they render on the server and hydrate on the client. Migrate one component at a time — no rewrite, no big bang.<br>The one thing that doesn’t cross over: React Server Components. Everything else — hooks, Suspense, context, SSR — comes along.

Read the OctaneCompat guide →

App.tsxCopy<br>// App.tsx — your existing React 19 app<br>import { OctaneCompat } from 'octane/react';<br>import { Counter } from './islands/Counter.tsrx';

export function App() {<br>return (<br>div className="dashboard"><br>h1>Ported one component at a timeh1>

{/* A compiled Octane island, hosted inside React with typed<br>props. Native events, real React context, SSR + hydration. */}<br>OctaneCompat><br>Counter start={3} /><br>OctaneCompat><br>div><br>);

Three.js, on Octane.<br>Octane supports Three.js through @octanejs/three – a technical-preview port of React Three Fiber.

Browse all the bindings →

Measured, not vibes<br>All suites →

Pick the frameworks and suite for the bar chart, or scan the whole grid — every cell is a<br>geometric mean of that suite’s per-operation scores relative to Octane. Lower is better.

frameworksOctane (.tsrx)React 19Preact 10Solid 2.0 betaSvelte 5Ripple 0.3Vue Vapor 3.6 beta

suitejs-frameworktodomvcchat-streamjs-framework-reorderdbmoneffectful-listmemo-wallrecursive-contextsignal-favoringportal-swarmasync-waterfallnewsstreaming-ssrbundle-sizessr-throughput

1× Octane<br>Vue Vapor 3.6 beta<br>0.98×

Octane (.tsrx)<br>1×

Ripple 0.3<br>1.1×

Solid 2.0 beta<br>1.1×

Svelte 5<br>1.6×

Preact 10<br>2.3×

React 19<br>2.5×

all suites<br>vs Octane

vs fastest

suiteOctane (.tsrx)React 19Preact 10Solid 2.0 betaSvelte 5Ripple...