Happy to announce Octane – the successor to Inferno. React’s programming model, compiled. Hooks, Suspense and Actions, compiled ahead of time. No virtual DOM. No Rules of Hooks. No manually maintained dependency arrays. The compiler understands what your code captures and generates the reactivity for you. Octane supports TSX and JSX, along with TSRX for even better DX and performance. It includes integrations for libraries such as TanStack, React Three Fiber, Lynx and StyleX, plus a compatibility layer for using Octane components inside existing React apps. Octane is available in alpha today, with beta coming soon.
![// Counter.tsrx — hooks next to output, no rules of hooks
import { useState, useEffect } from 'octane';
export function Counter(props) @{
const [count, setCount] = useState(0);
// A hook behind a condition is fine — slots are
// assigned by call site, not call order.
if (!props.paused) {
useEffect(() => {
console.log('count is now', count);
}); // the compiler infers [count]
}
<button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button>
}](https://pbs.twimg.com/media/HOPoguXXAAAEnKq?format=webp&name=medium)