React Intermediário: Hooks Avançados, Context API e Gerenciamento de Estado
- Nível: Intermediário
- Módulos: 9
- Aulas: 20
- Tempo de leitura: 9h 45min
- Tecnologias: React
- Preço: Gratuito
Código do curso: github.com/johnpires/react-intermediario-projeto-final
React é uma das bibliotecas JavaScript mais populares do mundo, e dominar seus recursos intermediários é o que separa um desenvolvedor iniciante de um profissional capaz de construir aplicações reais, escaláveis e de alta qualidade. Neste curso, você vai além dos fundamentos e mergulha nos conceitos que realmente fazem a diferença no dia a dia de um desenvolvedor React moderno.
Ao longo do curso, você vai dominar os Hooks nativos do React em profundidade — useState, useEffect, useCallback, useMemo, useRef e useReducer — entendendo não apenas como usá-los, mas quando e por quê cada um existe. Você aprenderá a criar Hooks customizados que encapsulam lógica reutilizável, tornando seu código mais limpo e testável. Em seguida, explorará a Context API para gerenciar estado global sem dependências externas, combinando-a com useReducer para implementar padrões robustos de gerenciamento de estado.
Este curso é ideal para desenvolvedores que já conhecem os fundamentos do React (componentes, props, JSX) e querem dar o próximo passo. Ao final, você estará apto a construir aplicações React completas, com roteamento via React Router v6, validação de formulários com react-hook-form e Zod, e boas práticas de performance. O curso culmina em um projeto prático completo: um Gerenciador de Tarefas com Context API, filtros dinâmicos e persistência de dados.
O que você vai aprender
Ao final deste curso, você será capaz de:
- Utilizar useState de forma avançada para gerenciar estados complexos e objetos aninhados
- Compreender e aplicar corretamente useEffect, incluindo cleanup e controle de dependências
- Otimizar performance de componentes com useCallback, useMemo e React.memo
- Implementar gerenciamento de estado global com Context API sem bibliotecas externas
- Usar useReducer para gerenciar lógica de estado complexa com actions e reducers
- Criar Hooks customizados reutilizáveis para encapsular lógica de negócio
- Configurar roteamento completo com React Router DOM v6
- Construir formulários robustos com react-hook-form e validação Zod
- Construir uma aplicação React completa do zero aplicando todos os conceitos aprendidos
Pré-requisitos
Para aproveitar ao máximo este curso, você deve ter conhecimento básico de React: saber criar componentes funcionais, trabalhar com props e estado simples (useState), e entender o conceito de JSX. Também é necessário ter familiaridade com JavaScript moderno (ES6+), incluindo arrow functions, destructuring, spread operator, Promises e async/await. Conhecimento básico de HTML e CSS é assumido. Não é necessário experiência com TypeScript, pois o curso usa JavaScript puro.
Conteúdo do curso
Módulo 1: Revisão de Conceitos Essenciais do React
Revisita os pilares do React — componentes, props, estado e renderização — com uma perspectiva mais aprofundada antes de avançar para os tópicos intermediários.
- Componentes, Props e Composição Revisitados (25 min)
- Estado Local com useState: Padrões Avançados (30 min)
- Renderização Condicional e Listas com Keys (20 min)
Módulo 2: useEffect em Profundidade
Domínio completo do Hook useEffect: efeitos colaterais, cleanup, controle de dependências e armadilhas comuns.
- Introdução ao useEffect e Efeitos Colaterais (25 min)
- Dependências do useEffect e Regras do Linter (30 min)
- Padrão AbortController: Cancelando Fetch em useEffect (25 min)
Módulo 3: Hooks de Performance: useCallback, useMemo e React.memo
Aprenda a otimizar renderizações desnecessárias usando as ferramentas certas de memoização do React.
- React.memo e o Problema das Re-renderizações (25 min)
- useMemo: Memoizando Cálculos Custosos (25 min)
- useCallback: Estabilizando Referências de Funções (25 min)
Módulo 4: Context API: Gerenciamento de Estado Global
Aprenda a compartilhar estado entre componentes sem prop drilling usando a Context API do React.
- Criando e Consumindo Context (30 min)
- Otimizando Context para Evitar Re-renderizações (30 min)
Módulo 5: useReducer: Gerenciamento de Estado Complexo
Domine o useReducer para gerenciar estados com lógica complexa, múltiplas transições e actions previsíveis.
- Introdução ao useReducer (30 min)
- Combinando Context com useReducer (35 min)
Módulo 6: Hooks Customizados
Crie seus próprios Hooks para encapsular lógica reutilizável e manter seus componentes limpos e focados.
- Criando Custom Hooks (30 min)
Módulo 7: React Router DOM v6
Configure roteamento completo em suas aplicações React com React Router v6: rotas, parâmetros, layouts e navegação programática.
- Configurando Rotas com React Router v6 (30 min)
Módulo 8: Formulários com React Hook Form e Zod
Construa formulários profissionais com validação robusta usando react-hook-form e esquemas Zod.
- React Hook Form: Fundamentos e Integração com Zod (35 min)
Módulo 9: Projeto Final: Gerenciador de Tarefas com Context + useReducer
Construa do zero um Gerenciador de Tarefas completo aplicando todos os conceitos do curso: Context API, useReducer, hooks customizados, React Router e formulários.
- Planejamento e Estrutura do Projeto (25 min)
- Implementando o Estado Global com Context + useReducer (40 min)
- Componentes e Interface do Gerenciador (40 min)
- Refinamentos: Persistência, Acessibilidade e Deploy (30 min)