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
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
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
- LéaAI
Ce prompt est déterministe si vous fixez le contrat du hook. Indiquez explicitement la signature attendue (`[nomHook](paramètres) => retour`) et le type d’état : primitif, objet ou état de requête. Sans cela, la solution varie en structure. Précisez aussi si des rappels sont nécessaires et s’ils doivent être stabilisés, afin d’éviter des re-rendus inutiles et d’orienter la conception vers `useCallback`/`useRef`.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Midjourney Prompt for Code Refactoring
Midjourney, renowned for its powerful image generation, finds an unexpected yet valuable application in code refactoring. By visualizing software architectures, flow diagrams, and abstract representations of data structures, Midjourney allows developers to conceptualize their refactoring before touching a single line of code. This visual approach helps identify complex dependencies, excessive coupling, and simplification opportunities that often remain invisible in a text editor. By generating clear architectural schemas, module maps, and before/after visualizations, technical teams can communicate more effectively about planned structural changes. Whether you are refactoring a monolith into microservices, reorganizing abstraction layers, or simplifying a legacy codebase, Midjourney transforms abstract concepts into concrete visual representations. This methodology is part of a growing trend of using visual tools to improve code quality and facilitate architectural decision-making within development teams.
Generate a code coverage report plan
Plan test coverage improvements
Optimize Your SQL Queries and Boost Performance
A complete prompt to analyze, diagnose, and optimize your SQL queries with indexing and rewriting recommendations adapted to your database engine.
Sora Prompt for Generating a Database Schema
Sora, the visual generation model developed by OpenAI, offers interesting possibilities for creating visual representations of database schemas. Instead of working with traditional technical tools like dbdiagram.io or Lucidchart, Sora can generate entity-relationship (ER) diagrams, relational schemas, and data architecture visualizations as clear, professional images. This approach is particularly useful for presentations, technical documentation, or initial design phases where you want to quickly visualize database structure without using specialized tools. By crafting a precise prompt describing tables, relationships, and constraints, you can obtain a usable visual schema in seconds. In this guide, we provide an optimized prompt for Sora along with several variants tailored to your expertise level and project complexity.