React Native Code Reviewer

Proposito

Detectar e corrigir anti-patterns comuns em codigo React Native para o projeto Nossa Maternidade.

Anti-Patterns a Detectar

1. ScrollView + .map() → FlatList

// ❌ ERRADO - ruim para performance com listas grandes
<ScrollView>
  {items.map(item => (
    <ItemComponent key={item.id} {...item} />
  ))}
</ScrollView>

// ✅ CORRETO - virtualizado, eficiente
<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <ItemComponent {...item} />}
/>

Por que? ScrollView renderiza TODOS os itens de uma vez. FlatList virtualiza e renderiza apenas itens visiveis.

2. console.log → logger.*

// ❌ ERRADO - nao deve ir para producao
console.log('debug:', data);
console.warn('aviso');
console.error('erro:', error);

// ✅ CORRETO - logger centralizado
import { logger } from '@/utils/logger';
logger.debug('debug:', data);
logger.warn('aviso');
logger.error('erro:', error);

Por que? Logger centralizado permite controle de nivel, formatacao consistente, e facilita debug em producao.

3. Tipo any → Tipos Explicitos

// ❌ ERRADO - perde type safety
const data: any = fetchData();
function process(input: any): any { ... }

// ✅ CORRETO - tipos explicitos
const data: UserProfile = fetchData();
function process(input: UserInput): ProcessedResult { ... }

// Se realmente nao sabe o tipo, use unknown:
const unknownData: unknown = externalAPI();
if (isUserProfile(unknownData)) {
  // Agora TypeScript sabe o tipo
}

4. Cores Hardcoded → useThemeColors()

// ❌ ERRADO
<View style={{ backgroundColor: '#FFFFFF' }}>
<Text style={{ color: 'black' }}>

// ✅ CORRETO
const colors = useThemeColors();
<View style={{ backgroundColor: colors.background.card }}>
<Text style={{ color: colors.text.primary }}>

5. Inline Functions em Renders

// ❌ ERRADO - cria nova funcao a cada render
<TouchableOpacity onPress={() => handlePress(item.id)}>

// ✅ CORRETO - useCallback
const handleItemPress = useCallback((id: string) => {
  // logica
}, [dependencies]);

// ou extrair para componente filho:
<ItemButton itemId={item.id} onPress={handlePress} />

6. Falta de Memoizacao em Listas

// ❌ ERRADO - re-renderiza sempre
const ListItem = ({ item }) => { ... };

// ✅ CORRETO - memoizado
const ListItem = memo(({ item }) => { ... });

7. useEffect sem Cleanup

// ❌ ERRADO - pode causar memory leak
useEffect(() => {
  const subscription = api.subscribe(handler);
}, []);

// ✅ CORRETO - cleanup function
useEffect(() => {
  const subscription = api.subscribe(handler);
  return () => subscription.unsubscribe();
}, []);

Comandos de Grep para Detectar

# ScrollView com children (possivel .map)
grep -r "ScrollView" --include="*.tsx" | grep -v "FlatList"

# console.log/warn/error
grep -rE "console\.(log|warn|error)" --include="*.ts" --include="*.tsx"

# Tipo any explicito
grep -rE ":\s*any" --include="*.ts" --include="*.tsx"

# Cores hex em estilos
grep -rE "#[0-9A-Fa-f]{6}" --include="*.tsx"

Checklist de Code Review

Performance

• Listas usam FlatList (nao ScrollView + map)
• Componentes de lista sao memoizados
• useCallback para handlers passados como props
• useMemo para calculos pesados

TypeScript

• Nenhum tipo any explicito
• Todos parametros de funcao tipados
• Interfaces para props de componentes

Logging

• Nenhum console.log/warn/error
• Usa logger.* para todos os logs

Design System

• Cores via useThemeColors()
• Spacing via Tokens.spacing
• Typography via TextStyles

React Hooks

• useEffect tem cleanup quando necessario
• Dependencies array correto
• Nao viola regras de hooks

Severidade