stamatios
← Voltar ao feed
Octane: biblioteca UI React sem virtual DOM
Open Source · Dev & Engenharia

Octane: biblioteca UI React sem virtual DOM

resumo de ~3 min

O que é Octane

Octane é uma biblioteca de UI JavaScript criada por Dominic Gannaway (autor do Inferno e colaborador do React, Lexical e Svelte). Ela mantém o modelo de programação do React - useState, useEffect, memo, context, portals, Suspense, transitions - mas elimina o virtual DOM por meio de um compilador que transforma o código antes do deploy.

Principais características

Sem virtual DOM: componentes re-renderizam como no React, mas um caminho de renderização compilado e um reconciliador baseado em LIS (Longest Increasing Subsequence) mantêm o overhead mínimo.

Dependências inferidas pelo compilador: ao omitir o array de dependências de useEffect, useMemo, useCallback etc., o compilador deriva automaticamente as dependências a partir das capturas léxicas do closure, incluindo setters estáveis, dispatchers, refs e getters de estado. Arrays explícitos continuam funcionando normalmente.

Sem regras de hooks: hooks são rastreados por call site, não por ordem de chamada. Um hook pode ficar dentro de um if ou após um early return. A única restrição é que hooks em loops JS simples geram erro de compilação - para isso existe a diretiva @for.

TSRX: uma extensão opcional de JSX com diretivas de template (@if, @for, @switch, @try) que compilam para fast paths com chaveamento, além do shorthand @{ … } que coloca setup e output lado a lado. JSX padrão (.tsx/.jsx) funciona normalmente.

Eventos nativos: sem sistema de eventos sintéticos. onInput é o handler por edição (como no navegador), e onChange mantém o significado nativo de commit.

Refs como props: ref={cb}, ref={obj}, ref={[a, b]} - sem necessidade de forwardRef.

SSR streaming e hydration: renderToPipeableStream e renderToReadableStream com flush out-of-order de boundaries Suspense, hydration byte-stable e suporte a <Hydrate> para hidratação diferida (lazy).

Composição de classes estilo clsx: class aceita strings, arrays, objetos e nesting nativamente.

O que não tem (por escolha)

Sem class components, sem Server Components, sem sistema de eventos sintéticos.

Status e ecossistema

O projeto está em alpha, com 3.900+ testes comportamentais. O monorepo inclui plugins para Vite, Rspack e Rsbuild, adaptadores para Vercel e Cloudflare Workers, integração com TanStack Start, CLI, servidor MCP para agentes de IA, e bindings para dezenas de bibliotecas do ecossistema React (zustand, jotai, TanStack Query, Apollo, Framer Motion, Radix, React Hook Form, Recharts, Three.js, Redux, entre outras). Requer Node.js 22+.