Performance em React Native

Para garantir que o aplicativo seja fluido, especialmente em dispositivos de entrada usados em campo, seguimos estas regras.

1. Renderização e Listas

• FlatList/SectionList: Sempre use memo em componentes de itens de lista.
• KeyExtractor: Sempre forneça uma chave única e estável.
• InitialNumToRender: Ajuste para evitar o carregamento excessivo de itens fora da tela.

2. Otimização de Imagens

• Redimensionamento: Nunca carregue imagens de alta resolução (4K/HD) se o container for pequeno.
• Formato: Prefira WebP para fotos e SVG para ícones/diagramas técnicos.
• Caching: Utilize o cache nativo para imagens do feed social.

3. Cálculos Complexos

• Thread de UI: Nunca realize cálculos pesados de caldeiraria no thread principal.
• UseMemo: Utilize para memorizar resultados de cálculos baseados em inputs.
• Debounce: Use debounce (ex: 300ms) ao atualizar o desenho técnico enquanto o usuário digita medidas.

4. Estado Global

• Zustand: Evite colocar dados que mudam com frequência (como coordenadas de toque) no estado global se apenas um componente precisa deles.
• Selectors: Use seletores específicos no Zustand para evitar re-renderizações desnecessárias.

5. Feedback Visual

• InteractionManager: Adie animações pesadas para depois que as transições de tela terminarem.
• Skeleton States: Prefira skeletons a spinners de carregamento para manter a estrutura visual.