Octane, the successor to Inferno – React's programming model, compiled

steadicat3 pts0 comments

Dominic Gannaway on X: "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." / X<br>Post

Log inSign up

Post

Dominic Gannaway

@trueadm

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.<br>console.log('count is now', count);<br>}); // the compiler infers [count]

setCount(count + 1)}>{'Count: ' + count}<br>}" class="block h-full w-full cursor-zoom-in appearance-none border-none bg-transparent p-0 text-inherit" href="/trueadm/status/2081764408741540071/photo/1"> {<br>console.log('count is now', count);<br>}); // the compiler infers [count]

setCount(count + 1)}>{'Count: ' + count}<br>}" class="w-full" loading="eager" fetchPriority="high" width="1310" height="672" src="https://pbs.twimg.com/media/HOPoguXXAAAEnKq?format=webp&name=medium" srcSet="https://pbs.twimg.com/media/HOPoguXXAAAEnKq?format=webp&name=small 680w, https://pbs.twimg.com/media/HOPoguXXAAAEnKq?format=webp&name=medium 1200w, https://pbs.twimg.com/media/HOPoguXXAAAEnKq?format=webp&name=large 2048w" sizes="(max-width: 600px) calc(100vw - 80px), 600px"/>

console.log('count is now', count);<br>}); // the compiler infers [count]

setCount(count + 1)}>{'Count: ' + count}<br>}" itemProp="description"/><br>span:not(:empty)~span:not(:empty)]:before:content-['·'] [&>span:not(:empty)~span:not(:empty)]:before:px-1 [&>span:not(:empty)~span:not(:empty)]:before:shrink-0">3:31 PM · Jul 27, 20263.3KViews

14<br>61<br>18

span:not(:empty)~span:not(:empty)]:before:content-['·'] [&>span:not(:empty)~span:not(:empty)]:before:px-1 [&>span:not(:empty)~span:not(:empty)]:before:shrink-0 min-w-0 overflow-hidden">Dominic Gannaway

@trueadm

26m

If you'd like to know more, check out the website and Github repo:

octanejs.dev<br>github.com/octanejs/octane

Octane — React's programming model, compiled

From octanejs.dev

svg]:size-5 text-body hover:bg-mix-current hover:bg-mix-amount-10 active:bg-mix-current active:bg-mix-amount-15 focus-visible:bg-mix-current focus-visible:bg-mix-amount-10 outline-current -m-2 shrink-0 cursor-pointer border-transparent p-0 text-body size-9 [&>svg]:size-[1.25em] [&>[data-engagement-icon]]:size-[1.25em] group-hover:bg-mix-current group-hover:bg-mix-amount-10" aria-label="View count" type="button" data-state="closed" href="/trueadm/status/2081764411396464982/quotes">615

span:not(:empty)~span:not(:empty)]:before:content-['·'] [&>span:not(:empty)~span:not(:empty)]:before:px-1 [&>span:not(:empty)~span:not(:empty)]:before:shrink-0 min-w-0 overflow-hidden">kate

@whoiskatrin

12m

octane is pretty awesome! kudos 🙌🏼

svg]:size-5 text-body hover:bg-mix-current hover:bg-mix-amount-10 active:bg-mix-current active:bg-mix-amount-15 focus-visible:bg-mix-current focus-visible:bg-mix-amount-10 outline-current -m-2 shrink-0 cursor-pointer border-transparent p-0 text-body size-9 [&>svg]:size-[1.25em] [&>[data-engagement-icon]]:size-[1.25em] group-hover:bg-mix-current group-hover:bg-mix-amount-10" aria-label="View count" type="button" data-state="closed" href="/whoiskatrin/status/2081767881704972541/quotes">115

Relevant people<br>Dominic Gannaway@trueadmFollow<br>I'm a frontend engineer @OpenAI. Author of @octanejs, @ripple_ts, @lexicaljs and @inferno_js. I was also a core engineer who helped build @reactjs and @sveltejs

Don't miss what's happening<br>People on X are the first to know.

Log inSign up

New to X?<br>Sign up now to get your own personalized timeline!<br>Sign up with GoogleSign up with AppleCreate account<br>By signing up, you agree to the Terms of Service and Privacy Policy, including Cookie Use.

Trending now

count span empty octane current before

Related Articles