Official account of Octane, the successor to Inferno. React's programming model, compiled ahead of time. No VDOM, no rules of hooks.
London
- Tweets 17
- Following 1
- Followers 485
- Likes 10
`useLinkedState` was created to avoid doing `setState` during render – which we felt wasn't very usable or scalable by both humans and agents. We also have a "use strong" mode for Octane that literally bans, at a compiler level, setState in the render phase for either the entire project or specific modules.
We're also exploring using "use strong" to ban `setState` in effects, with error messages that tell the agent to move it to a better location – such as the event handler or the right place in your design system.
we know that humans get emotional about these choices, but if you're not the one making the changes, then having an agent deal with the constraints means better code in general.
Octane's useLinkedState solves synchronization state problem. No option from React 🤷♂️
@octanejs @reactjs #reactjs #javascript
2
2
33
5,356
If you want to know more about the API: octanejs.dev/docs/core-apis#…
2
492
Octane JS retweeted
I’m helping the @octanejs team. And for kicks today I made minwind, a tailwind classname compressor that you can theme. Turned my personal site into only Spaceballs related classnames. Fun easter eggs. github.com/jonkwheeler/minwi…
1
8
325
Octane JS retweeted
The amount of the effort that has gone into this has been incredible. One of the last missing pieces for the TSRX ecosystem was Rust support.
Meet OXC for TSRX
TSRX: the successor to JSX
OXC: the fast Rust toolchain powering Vite and Rolldown
Linter, formatter, parser. All compatible with your existing toolchain, including Vite.
2
6
136
13,929
Octane JS retweeted
Now you can `useState` on a Sony PSP 😎
React couldn’t run here, but Octane can! It compiles the same hooks-and-JSX programming model directly to PocketJS’s native UI tree.
PocketJS 0.8.0 adds first-class Octane support, with no virtual DOM or reconciler included.
4
22
346
28,662
Octane JS retweeted
Octane now has native Lynx support!
Battle-tested @octanejs Lynx by porting our signature tutorials.
And they're now live on the Octane website ;)
2
8
87
7,729
Octane is far more than a "faster" version of React. Inferno tried to be that – and it succeeded to some extent too – it powered Facebook KaiOS to hundreds of millions of users in production, for low-end devices that needed the low memory usage and high performance.
3
6
72
20,015
Octane JS retweeted
Battle-tested @octanejs Lynx by porting our signature tutorials.
And they're now live on the Octane website ;)
7
1
44
11,402
If you want to get involved with Octane, we have a Discord server you can join: discord.gg/8puY9fFqd9
1
2
12
8,040
Octane is now available in beta!
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>
}](/t/6eb23b644d9dc9f2adc2f2f8e1cda413cc56fe51c49d8259/pic/orig/media%2FHOPoguXXAAAEnKq.jpg)
ALT // 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> }
3
2
19
2,315