1) Reatividade: entenda o $: e evite side effects desnecessários

Em Svelte, as declarações reativas (usando o operador $:) devem derivar valores ou reagir a mudanças de estado de forma previsível. O erro clássico é misturar side effects dentro de blocos reativos, o que dispara operações a cada alteração de dependências, impactando desempenho e previsibilidade.

• Use $: apenas para derivar valores puros ou para reagir a mudanças que já não gerem efeitos colaterais assíncronos dentro do bloco.
• Para fetches ou chamadas assíncronas, prefira lifecycle hooks (onMount) ou efeitos controlados com afterUpdate, com cancelamento quando apropriado.
• Mantenha a template o mais estreita possível; se tiver cálculos pesados, mova-os para uma variável derivada fora do HTML.

2) Gerenciamento de estado: props, stores e imutabilidade

Props (export let) são de origem externa ao componente filho. Mutá-los diretamente é uma prática perigosa, pois viola a contract de leitura de props e pode causar efeitos colaterais difíceis de rastrear.

• Não modifique props diretamente (ex.: items.push(…)). Em vez disso, crie uma cópia local para edições ou use stores para estado compartilhado.
• Para comunicar mudanças ao componente pai, utilize createEventDispatcher para emitir eventos personalizados.
• Considere stores (writable, readable, derived) quando o estado precisa ser compartilhado entre múltiplos componentes, evitando prop drilling excessivo.

// Erro comum: mutar props diretamente
export let items = [];

// Erro: items.push({ id: Date.now(), value: 'novo' }); // não faça isso

// Correção: manter props imutáveis e gerenciar estado local
let localItems = [...items];

function addItem() {
  localItems = [...localItems, { id: Date.now(), value: 'novo' }];
}

3) Performance e renderização: minimizando updates

Renderizações desnecessárias ocorrem quando mudanças pequenas disparam re-renderizações amplas. Otimize com práticas simples e certeiras:

• Use o bloco {#each} com chave (ex.: {#each items as item (item.id)}) para evitar re-renderizações de itens inalterados.
• Dados derivados devem ser computados fora do template sempre que possível (memoização com $:).
• Evite lógica complexa diretamente em markup. Prefira validações condicionais com {#if} para renderização condicional controlada.
• Descarregue cálculos pesados para funções puras chamadas em reatividade ou em hooks apropriados, não no template.

4) Ciclo de vida, DOM e eventos: uso correto de lifecycle

O gerenciamento correto do ciclo de vida evita vazamentos de memória e acessos indevidos ao DOM. Use os hooks do ciclo de vida para operações com DOM, assinaturas e efeitos de longo prazo.

• onMount: ideal para operações que dependem do DOM ou para iniciar dados assíncronos assim que o componente é montado.
• afterUpdate: execute ações após cada atualização do DOM; combine com condições para evitar execuções desnecessárias.
• onDestroy: limpe listeners, assinaturas ou timers para evitar vazamentos de memória.