1. Entendendo o grafo reativo do Solid

Solid constrói um grafo de dependências a partir de sinais (createSignal), memos (createMemo) e efeitos (createEffect). Compreender esse grafo é a chave para diagnosticar por que uma linha de código dispara recomputações ou não. Para debugar, começo mapeando quem depende de quem e onde as mudanças ocorrem no fluxo de dados.

• Registre pontos de mudança: identifique quais sinais mudam e quais efeitos são reexecutados em resposta a essas mudanças.
• Priorize gargalos: concentre-se nos sinais/memos com maior custo de recomputação e nos efeitos que acionam operações pesadas.
• Ferramentas de observação: use logs estratégicos dentro de createEffect ou dentro de callbacks para ver a ordem de execução.

2. Ferramentas de debugging com Solid DevTools

Para diagnosticar com eficiência, utilizo o Solid DevTools. A extensão oferece uma visão direta do grafo reativo, ajuda a identificar recomputações caras e permite inspecionar o owner (contexto) de cada trecho de código.

• Inspecione o componente raiz e o conjunto de dependências de cada sinal/memo.
• Observe a frequência de recomputações por sinal e por memo derivado.
• Utilize a visão de grafos para isolar ciclos de atualização indesejados e confirmar a ordem de execução.

3. Estratégias para reduzir re-renders e otimizar performance

O objetivo é reduzir a army de recomputações desnecessárias sem perder reatividade. Aplique as técnicas abaixo para manter a UI responsiva mesmo com lógica complexa:

• Use createMemo para derivar valores caros, evitando que cálculos se repitam sem necessidade.
• Divida propriedades (splitProps) para limitar o número de sinais ligados a um componente.
• Utilize batch ao atualizar múltiplos estados; isso evita várias reexecuções consecutivas de efeitos.
• Evite passar referências de objetos recém-criados como props constantes; prefira estágios estáveis ou memoizados.
• Prefira componentes que utilizam props imutáveis quando possível, aproveitando a natureza imutável para reduzir dependências desnecessárias.

4. Técnicas avançadas de debugging com utilitários do Solid

Abaixo apresento padrões que ajudam a isolar comportamento inesperado durante o debugging, sem alterar a lógica de produção. São úteis para entender o fluxo de dados e o impacto de mudanças sutis.

// Exemplo: padrões de debugging com untrack e batch
import { createSignal, createEffect, batch, untrack, getOwner } from 'solid-js';

function DebugExample() {
  const [name, setName] = createSignal('Alice');
  const [city, setCity] = createSignal('Lisboa');

  // Ler valor sem rastrear mudanças reativas
  function readNameUntracked() {
    const nm = untrack(() => name());
    console.log('Nome lido sem tracking:', nm);
  }

  // Agrupar várias atualizações para evitar recomputações intermediárias
  function updateAll() {
    batch(() => {
      setName('Carlos');
      setCity('Porto');
    });
  }

  createEffect(() => {
    console.log('Nome:', name(), 'Cidade:', city());
  });

  // Inspecionar o contexto atual (owner)
  const owner = getOwner();
  console.debug('Owner atual:', owner?.componentName);

  return null;
}
        

Observação: o código acima demonstra padrões de debugging úteis durante o desenvolvimento. Evite manter chamadas de debug em código de produção; prefira logs controlados por nível de verbosidade.