Create Custom React Hooks Like a Pro
A complete prompt to generate well-typed, tested and optimized custom React hooks, with usage examples and best practices.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Tu es un développeur React senior spécialisé dans les hooks personnalisés et les patterns avancés. Crée un hook React personnalisé nommé [NOM_DU_HOOK] qui remplit la fonctionnalité suivante : [DESCRIPTION_FONCTIONNALITE].
Contexte du projet :
- Version de React : [VERSION_REACT]
- TypeScript : [OUI_OU_NON]
- Cas d'usage principal : [CAS_USAGE]
Le hook doit respecter ces exigences :
- Suivre les règles des hooks React (appels au top level, uniquement dans des composants ou d'autres hooks)
- Gérer correctement le cycle de vie (cleanup dans useEffect si nécessaire)
- Être entièrement typé si TypeScript est activé
- Inclure la gestion des cas d'erreur et des états de chargement si pertinent
- Être réutilisable et composable avec d'autres hooks
Pour chaque hook, fournis :
- Le code complet du hook avec des commentaires explicatifs
- L'interface TypeScript des paramètres et de la valeur de retour
- Un exemple d'utilisation concret dans un composant
- Les tests unitaires avec React Testing Library et renderHook
- Les pièges courants à éviter avec ce hook
- Les optimisations de performance (useCallback, useMemo, useRef) et justifie chaque choix
Si le hook implique des effets de bord (appels API, event listeners, timers), montre explicitement la logique de cleanup et explique pourquoi elle est nécessaire.
Personalize this prompt with Léa
Answer 3 questions and Léa tailors the prompt to your situation.
Why this prompt works
<p>This prompt lets you generate professional-quality <strong>custom React hooks</strong>. By providing the hook name, target feature and your project's technical context, the AI produces complete code with TypeScript types, tests and concrete examples.</p><p>For best results, be specific in the <strong>feature description</strong>. For example, instead of saying "a hook for forms", describe "a hook that handles real-time validation of a multi-step form with local persistence". The richer the context, the more the generated hook will match your actual need.</p><p>The prompt systematically requests <strong>unit tests and cleanup handling</strong>, two often-neglected aspects that cause memory leaks and hard-to-diagnose bugs. Use it both to create new hooks and to refactor existing logic into reusable hooks.</p>
Use Cases
Expected Output
A complete React hook with commented source code, TypeScript types, a component integration example, unit tests with renderHook, and performance optimization tips.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
Be the first to comment on this prompt.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Convert CSS to Tailwind
Migrate styling to Tailwind
Terraform Multi-Environment Architecture
Managing multiple environments with Terraform
Multi-Level Testing Pipeline
Structuring tests in the pipeline
DALL-E Prompt for Code Refactoring
DALL-E, OpenAI's image generation model, may seem a surprising choice for code refactoring. Yet visualization is a powerful lever for rethinking software architecture. By generating conceptual diagrams, architecture schemas, or visual representations of data flows, DALL-E enables developers to step back from their codebase and identify refactoring patterns that escape a linear reading of the code. This visual approach is particularly effective for communicating architectural decisions to a team, documenting a complex refactoring before implementing it, or exploring different modular organizations. Rather than refactoring the code directly, DALL-E intervenes upstream: it produces clear visual representations of the current and target states, facilitating the planning and collective validation of structural changes. Combined with code tools like ChatGPT or Claude, DALL-E completes the workflow by bringing the visual dimension often missing in refactoring processes. This page guides you in creating DALL-E prompts that generate useful architectural visualizations for your refactoring projects.