SolidJS vs React: Comparando Modelos de Componentes e Performance

Ao escolher um framework frontend, entender como ele lida com renderização de componentes e performance é crucial. Para desenvolvedores React considerando SolidJS, as diferenças nos modelos de componentes e sistemas de reatividade impactam diretamente a performance da aplicação e a experiência de desenvolvimento.

Este artigo compara os modelos de componentes do SolidJS e React, focando em seus mecanismos de renderização, características de performance e diferenças práticas de código.

Modelos de Componentes: Diferenças Fundamentais

React e SolidJS adotam abordagens fundamentalmente diferentes para renderização de componentes, apesar de sua sintaxe JSX similar.

Modelo de Componentes do React

React usa um modelo baseado em renderização com estas características principais:

• Componentes são funções que executam a cada mudança de estado
• Usa Virtual DOM para minimizar atualizações reais do DOM
• Depende de diffing para determinar o que mudou
• Componentes re-renderizam toda sua subárvore por padrão

function Counter() {
  const [count, setCount] = useState(0);
  
  // Esta função executa a cada renderização
  console.log("Component rendering");
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Neste exemplo, toda a função do componente re-executa sempre que count muda, e o processo de reconciliação do React determina quais atualizações do DOM são necessárias.

Modelo de Componentes do SolidJS

SolidJS usa um modelo de compilação reativa com estas características:

• Componentes executam apenas uma vez durante a inicialização
• Sem Virtual DOM ou algoritmo de diffing
• Cria um grafo reativo de dependências
• Atualiza apenas os nós específicos do DOM afetados por mudanças de estado

function Counter() {
  const [count, setCount] = createSignal(0);
  
  // Esta função executa apenas uma vez
  console.log("Component initializing");
  
  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

No SolidJS, a função do componente executa apenas uma vez. O sistema reativo rastreia quais partes do DOM dependem de quais sinais, atualizando apenas esses nós específicos quando os valores mudam.

Sistemas de Reatividade Comparados

Os sistemas de reatividade do React e SolidJS determinam como mudanças de estado se propagam para a UI.

Reatividade Baseada em Hooks do React

React usa um sistema de reatividade de granularidade grossa:

• Estado é gerenciado através de hooks como useState e useReducer
• Mudanças de estado disparam re-renderização de componentes
• React depende de memoização (useMemo, useCallback, React.memo) para prevenir re-renderizações desnecessárias
• Fluxo de dados é gerenciado através de props e context

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Learn React", completed: false },
    { id: 2, text: "Build app", completed: false }
  ]);

  // Todo este componente re-renderiza quando todos muda
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? {...todo, completed: !todo.completed} : todo
    ));
  };

  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onToggle={() => toggleTodo(todo.id)} 
        />
      ))}
    </ul>
  );
}

// Este componente re-renderiza quando props mudam
function TodoItem({ todo, onToggle }) {
  console.log(`Rendering: ${todo.text}`);
  return (
    <li>
      <input 
        type="checkbox" 
        checked={todo.completed} 
        onChange={onToggle} 
      />
      <span>{todo.text}</span>
    </li>
  );
}

Reatividade de Granularidade Fina do SolidJS

SolidJS usa um sistema de reatividade de granularidade fina:

• Estado é gerenciado através de primitivas reativas como createSignal e createStore
• Atualizações são granulares, direcionando apenas nós do DOM afetados
• Não há necessidade de memoização extensiva
• Dependências reativas são rastreadas automaticamente

function TodoList() {
  const [todos, setTodos] = createStore([
    { id: 1, text: "Learn SolidJS", completed: false },
    { id: 2, text: "Build app", completed: false }
  ]);

  const toggleTodo = (id) => {
    setTodos(id, "completed", completed => !completed);
  };

  return (
    <ul>
      <For each={todos}>
        {(todo) => (
          <TodoItem todo={todo} onToggle={[toggleTodo, todo.id]} />
        )}
      </For>
    </ul>
  );
}

function TodoItem(props) {
  // Isto registra apenas uma vez durante a inicialização
  console.log(`Creating: ${props.todo.text}`);
  
  return (
    <li>
      <input 
        type="checkbox" 
        checked={props.todo.completed} 
        onChange={() => props.onToggle[0](props.onToggle[1])} 
      />
      <span>{props.todo.text}</span>
    </li>
  );
}

Benchmarks de Performance e Análise

Os diferentes modelos de componentes levam a diferenças significativas de performance entre React e SolidJS.

Performance de Renderização

De acordo com o JS Framework Benchmark, SolidJS consistentemente supera React na maioria das métricas:

• Renderização inicial: SolidJS é tipicamente 30-40% mais rápido
• Performance de atualização: SolidJS pode ser 2-5x mais rápido para atualizações parciais
• Uso de memória: SolidJS usa significativamente menos memória devido à sua abordagem compilada

Operações DOM

A principal diferença de performance deriva de como operações DOM são tratadas:

• React: Cria uma representação virtual do DOM, faz diff contra a versão anterior, então aplica mudanças
• SolidJS: Compila componentes em operações diretas do DOM sem representação intermediária

Esta diferença torna-se mais pronunciada com:

• Listas grandes de itens
• Atualizações frequentes de estado
• Árvores de componentes complexas

Exemplos de Componentes do Mundo Real

Vamos examinar como essas diferenças se manifestam em um exemplo prático: uma lista filtrável.

Implementação React

function FilterableList() {
  const [items] = useState([
    "Apple", "Banana", "Cherry", "Date", "Elderberry"
  ]);
  const [filter, setFilter] = useState("");
  
  // Este cálculo executa a cada renderização
  const filteredItems = items.filter(item => 
    item.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <div>
      <input 
        type="text" 
        value={filter} 
        onChange={e => setFilter(e.target.value)} 
        placeholder="Filter items..." 
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

No React, quando o filtro muda:

1. Todo o componente re-renderiza
2. A lógica de filtragem re-executa
3. React faz diff da lista anterior e nova
4. Apenas nós DOM alterados são atualizados

Implementação SolidJS

function FilterableList() {
  const [items] = createSignal([
    "Apple", "Banana", "Cherry", "Date", "Elderberry"
  ]);
  const [filter, setFilter] = createSignal("");
  
  // Isto cria um sinal derivado que recalcula apenas quando dependências mudam
  const filteredItems = createMemo(() => 
    items().filter(item => 
      item.toLowerCase().includes(filter().toLowerCase())
    )
  );
  
  return (
    <div>
      <input 
        type="text" 
        value={filter()} 
        onInput={e => setFilter(e.target.value)} 
        placeholder="Filter items..." 
      />
      <ul>
        <For each={filteredItems()}>
          {item => <li>{item}</li>}
        </For>
      </ul>
    </div>
  );
}

No SolidJS, quando o filtro muda:

1. Apenas o sinal filter atualiza
2. O memo filteredItems recalcula
3. O componente For eficientemente atualiza apenas os itens da lista que precisam mudar
4. Nenhuma re-renderização de componente ocorre

Uso de Memória e Tamanho do Bundle

Os modelos de componentes também afetam o uso de memória e tamanho do bundle:

Pegada de Memória

• React: Maior uso de memória devido a instâncias de componentes, nós fiber e o Virtual DOM
• SolidJS: Menor uso de memória pois componentes são compilados após a inicialização

Tamanho do Bundle

• React: Biblioteca core é ~40KB (minificado + gzipped)
• SolidJS: Biblioteca core é ~7KB (minificado + gzipped)

Esta diferença pode ser significativa para aplicações críticas em performance, especialmente em dispositivos móveis.

Técnicas de Otimização

Cada framework requer diferentes abordagens de otimização devido aos seus modelos de componentes.

Otimização React

Desenvolvedores React precisam estar familiarizados com várias técnicas de otimização:

• React.memo para prevenir re-renderizações desnecessárias de componentes
• useMemo para cachear cálculos caros
• useCallback para estabilizar referências de função
• Gerenciamento cuidadoso de estado para evitar re-renderização de grandes árvores de componentes

// Componente React otimizado
const ExpensiveComponent = React.memo(({ data, onAction }) => {
  // Lógica do componente
});

function ParentComponent() {
  const [data, setData] = useState([]);
  
  // Estabilizar referência de função
  const handleAction = useCallback((id) => {
    // Lógica da ação
  }, []);
  
  // Cachear cálculo caro
  const processedData = useMemo(() => {
    return data.map(item => expensiveProcess(item));
  }, [data]);
  
  return <ExpensiveComponent data={processedData} onAction={handleAction} />;
}

Otimização SolidJS

SolidJS requer menos otimizações explícitas:

• createMemo para cachear cálculos caros
• Uso adequado de sinais para garantir atualizações granulares

// Componente SolidJS com otimização mínima necessária
function ParentComponent() {
  const [data, setData] = createSignal([]);
  
  // Função não precisa de estabilização
  const handleAction = (id) => {
    // Lógica da ação
  };
  
  // Cachear cálculo caro
  const processedData = createMemo(() => {
    return data().map(item => expensiveProcess(item));
  });
  
  return <ExpensiveComponent data={processedData()} onAction={handleAction} />;
}

Conclusão

A diferença fundamental entre React e SolidJS reside em seus modelos de componentes. A abordagem baseada em renderização do React fornece um modelo mental mais simples, mas requer mais otimização para aplicações críticas em performance. O modelo de compilação reativa do SolidJS oferece performance superior com menos esforço de otimização, mas requer entendimento de conceitos de programação reativa.

Sua escolha entre esses frameworks deve considerar os requisitos de performance da sua aplicação, expertise da equipe e necessidades do ecossistema. React oferece maturidade e um vasto ecossistema, enquanto SolidJS fornece vantagens de performance e um modelo de reatividade mais eficiente.

Ambos os frameworks têm suas forças, e entender seus modelos de componentes ajuda você a tomar uma decisão informada para seu próximo projeto.

FAQs