SolidJS: React Sem Virtual DOM

SolidJS parece React. Usa JSX. Mas internamente? Completamente diferente.

Sem Virtual DOM

React cria uma árvore virtual, compara (diff), e atualiza o DOM real.

Solid compila JSX direto para DOM mutations. Zero overhead.

Exemplo: Counter

import { createSignal } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);
  
  return (
    <button onClick={() => setCount(count() + 1)}>
      Clicks: {count()}
    </button>
  );
}

Quando count muda, Solid atualiza apenas o text node. Não há re-render do componente.

Fine-Grained Reactivity

No React, quando o estado muda, o componente inteiro re-executa.

// React - componente re-executa
function App() {
  const [name, setName] = useState('Felipe');
  console.log('Renderizou!'); // ← Executa toda vez
  
  return <h1>Olá {name}</h1>;
}

No Solid, o componente executa uma vez. Apenas as expressões reativas atualizam.

// Solid - componente executa uma vez
function App() {
  const [name, setName] = createSignal('Felipe');
  console.log('Executou!'); // ← Só na primeira vez
  
  return <h1>Olá {name()}</h1>; // Apenas este texto atualiza
}

Stores: Estado Reativo

Solid tem stores nativos para estado complexo:

import { createStore } from 'solid-js/store';

const [user, setUser] = createStore({
  name: 'Felipe',
  profile: {
    avatar: '/avatar.png',
    bio: 'Developer'
  }
});

// Atualização imutável
setUser('profile', 'bio', 'Senior Developer');

Mudanças aninhadas são reativas automaticamente.

Performance: Benchmarks Reais

No js-framework-benchmark:

• React: 100 (baseline)
• Solid: 170 (70% mais rápido)
• Vanilla JS: 200

Solid é quase tão rápido quanto escrever DOM manipulation puro.

Suspense e Streaming

Solid suporta Suspense nativo:

<Suspense fallback={<Loading />}>
  <UserProfile userId={123} />
</Suspense>

E SSR com streaming (igual React 18).

Quando Usar Solid?

✅ Performance crítica (dashboards, data-heavy apps)
✅ Quer JSX mas não quer React
✅ Apps com muitas atualizações de estado

❌ Precisa do ecossistema React (libs, jobs)
❌ Time não quer aprender novo paradigma

---

Opinião: Solid é tecnicamente superior. Mas React tem o ecossistema. Escolha depende do contexto.