Visão Geral

Este curso mostra, de forma simples e objetiva, como identificar gargalos de performance em aplicações React e aplicar técnicas modernas para deixá-las mais rápidas, leves e eficientes. Você aprenderá a otimizar renderizações, usar memoization corretamente, estruturar componentes com inteligência e medir performance como um profissional.

Objetivo

Após realizar este curso, você será capaz de:

• Detectar problemas reais de performance em React.
• Evitar renderizações desnecessárias.
• Utilizar memo, useCallback e useMemo sem erros.
• Otimizar listas, layouts e cálculos pesados.
• Medir desempenho e tomar decisões baseadas em dados.
• Estruturar projetos React focados em eficiência.

Publico Alvo

• Pessoas que já conhecem React e querem elevar o nível.
• Devs front-end que trabalham com aplicações médias e grandes.
• Estudantes que desejam criar interfaces mais rápidas e eficientes.
• Quem quer dominar boas práticas de otimização no React moderno.

Pre-Requisitos

• JavaScript intermediário.
• React básico/intermediário (componentes, estado, props, hooks, renderização).

Conteúdo Programatico

Module 1 – Understanding React Rendering

1. How React rendering works
2. Reconciliation overview
3. Identifying unnecessary renders
4. Common performance pitfalls

Module 2 – Memoization Essentials

1. When to use React.memo
2. useCallback and useMemo explained
3. Dependency arrays best practices
4. Preventing stale references

Module 3 – Optimizing Component Structure

1. Splitting components strategically
2. Avoiding prop drilling
3. State colocations
4. Using Context with performance in mind

Module 4 – List and UI Optimization

1. Virtualization with react-window
2. Key usage best practices
3. Efficient list rendering patterns
4. Rendering large datasets

Module 5 – Heavy Computation Optimization

1. Lazy initialization
2. Debouncing and throttling
3. Offloading work with Web Workers
4. Handling expensive operations in hooks

Module 6 – Profiling and Measuring Performance

1. Using React DevTools Profiler
2. Flame charts analysis
3. FPS and UI responsiveness
4. Analyzing bottlenecks in real examples

Module 7 – Advanced Performance Techniques

1. Suspense & concurrent features
2. Code splitting
3. Lazy loading components
4. Prefetching and caching strategies

Module 8 – Final Project

1. Complete optimization of a slow React app
2. Fixing renders, refatoring components
3. Applying memoization strategy
4. Measuring “before and after” performance gain