debugging-strategies

Resultado esperado:

Vou aplicar depuração sistemática para encontrar este problema de propriedade indefinida.

## Passo 1: Reproduzir e Observar
- O erro ocorre sempre ou aleatoriamente?
- Qual endpoint da API o dispara?
- Quais parâmetros de requisição são enviados?

## Passo 2: Gather Information
1. Adicione registro estratégico antes do provável ponto de falha:
```javascript
console.log('Order data:', JSON.stringify(order, null, 2));
```
2. Verifique qual propriedade pode estar indefinida:
```javascript
console.log('Items:', order?.items);
console.log('User:', order?.user?.name);
```

## Passo 3: Hipótese
Hipótese: O erro provavelmente ocorre quando:
- order.items está indefinido para certos tipos de requisição
- order.user é null para usuários convidados

## Passo 4: Testar e Verificar
Adicione verificações de null e verifique com requisições de exemplo:
```javascript
const items = order?.items ?? [];
const userName = order?.user?.name ?? 'Guest';
```

Quer que eu ajude você a implementar esta correção?

Resultado esperado:

Vou guiá-lo pela depuração de um vazamento de memória React sistematicamente.

## Fase de Reprodução
1. Abra Chrome DevTools > aba Memory
2. Tire um snapshot do heap (antes)
3. Execute a ação suspeita de causar o vazamento 10-20 vezes
4. Tire outro snapshot (depois)
5. Compare os snapshots para identificar objetos retidos

## Padrões Comuns de Vazamento de Memoria em React
1. Listeners de eventos não cancelados
2. Timers (setInterval) não limpos no cleanup do useEffect
3. Closures mantendo referências ao escopo do componente
4. Caches globais crescendo sem limites

## Passos Rápidos de Depuração
```javascript
useEffect(() => {
const timer = setInterval(() => {
// ...
}, 1000);

// Função de cleanup - CRÍTICO para prevenir vazamentos
return () => {
clearInterval(timer);
// Remova quaisquer assinaturas
};
}, []);
```

Quais sintomas você está vendo? Memória alta no DevTools ou travamentos reais?