Semana 3 - React e Hooks Avançados

/ 2 min read
reactjavascripthooksperformance

Foco da Semana

Dediquei esta semana para dominar React Hooks avançados e técnicas de otimização de performance em aplicações React.

Conceitos Estudados

Hooks Avançados

  • useCallback e useMemo - quando usar cada um
  • useReducer para estados complexos
  • useRef além de referências ao DOM
  • useLayoutEffect vs useEffect

Custom Hooks

  • Criação de hooks reutilizáveis
  • useLocalStorage
  • useDebounce
  • useFetch

Performance

  • React.memo e quando usar
  • Code splitting com lazy loading
  • Profiling com React DevTools
  • Virtual lists para grandes conjuntos de dados

Conquistas

✅ Criei biblioteca pessoal de custom hooks
✅ Otimizei componente com renderização lenta usando useMemo
✅ Implementei infinite scroll com useIntersectionObserver
✅ Reduzi bundle size em 30% com code splitting

Lições Aprendidas

  1. Não otimize prematuramente: Medir primeiro, otimizar depois
  2. useCallback/useMemo têm custo: Usar apenas quando necessário
  3. Custom hooks são poderosos: Abstraem lógica complexa de forma elegante

Projeto da Semana

Desenvolvi um dashboard com:

  • Lista virtualizada de milhares de itens
  • Debounce em campo de busca
  • Lazy loading de rotas
  • Estado gerenciado com useReducer

Métricas

  • Lighthouse Score: 95/100 (antes: 72/100)
  • First Contentful Paint: Melhorou de 2.1s para 0.8s
  • Time to Interactive: Reduziu de 4.5s para 1.9s

Próximos Passos

  • Estudar Server Components do Next.js
  • Aprender sobre Suspense e Concurrent Mode
  • Explorar bibliotecas de gerenciamento de estado (Zustand, Jotai)
← Voltar para relatórios