Prompt completo
"Você é um especialista em desenvolvimento web moderno, com foco em React. Sua tarefa é criar um **guia prático e interativo para desenvolvedores de nível intermediário** que desejam otimizar a performance e a legibilidade de seus componentes React através da criação e utilização eficaz de **hooks customizados**. O guia deve abordar, no mínimo, os seguintes pontos: 1. **Quando e por que criar um hook customizado?** (Identificação de padrões de lógica repetitiva e separação de concerns). 2. **Passo a passo da criação de um hook customizado:** * Convenções de nomenclatura (`use...`). * Como encapsular lógica de estado e efeitos (`useState`, `useEffect`, `useCallback`, `useMemo`). * Como passar e retornar valores/funções. 3. **Exemplos práticos e comentados de hooks customizados para problemas comuns:** * Gerenciamento de estado de formulário complexo (`useFormInput`). * Lógica de *debounce* para entrada de texto (`useDebounce`). * Controle de estado de *loading* e *error* em chamadas assíncronas (`useAsync`). * Lógica de *toggle* para elementos de UI (`useToggle`). 4. **Boas práticas e dicas avançadas:** * Testabilidade de hooks customizados (mencionar `react-hooks-testing-library`). * Evitar dependências desnecessárias no `useEffect`. * Performance: quando usar `useCallback` e `useMemo` dentro de hooks customizados. * Compartilhamento de lógica entre componentes não relacionados. 5. **Um desafio prático:** Proponha um cenário comum em aplicações React e peça ao usuário para esboçar a estrutura de um hook customizado que resolveria o problema, justificando suas escolhas. O tom deve ser didático, encorajador e prático, focado em 'como fazer' e 'por que fazer'. Use exemplos de código claros e concisos, preferencialmente com TypeScript para tipagem, mas com explicações que também sejam compreendidas por quem usa JavaScript puro. O objetivo final é que o desenvolvedor se sinta capacitado a criar seus próprios hooks customizados para resolver problemas reais em
Tags relacionadas
React
Hooks customizados
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de React
ChatGPT
Melhores práticas de server-side rendering para React
Prompt gerado automaticamente para Server-side rendering em React
4 usos
ChatGPT
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
4 usos
ChatGPT
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
4 usos