---
name: react-hook-optimizer
description: "Refactor React components to use custom hooks and optimize renders. Use when the user wants help with React Hook Optimizer. Related topics: react, javascript, coding."
---

# React Hook Optimizer

Refactor React components to use custom hooks and optimize renders.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Paste component code here** (longer free text)
- **What logic should be extracted?** (longer free text)
- **Use useCallback/useMemo to prevent re-renders?** (choose one: Yes, No)
- **Language** (choose one: JavaScript, TypeScript)
- **Include comments explaining the custom hook?** (choose one: Yes, No)

## Prompt template

## Introduction
Clean up your React code by extracting logic into reusable Custom Hooks.

## Code Info
- Paste your messy React Component:
{{Paste component code here}}
- What logic should be extracted?: {{What logic should be extracted?}}

## Optimization Goals
- Use useCallback/useMemo to prevent re-renders? {{Use useCallback/useMemo to prevent re-renders?}}
- Language: {{Language}}
- Include comments explaining the custom hook? {{Include comments explaining the custom hook?}}

---
**Goal**: Output the separated Custom Hook file and the updated, cleaner Component file.

---

Source: [React Hook Optimizer on PromptBuild](https://promptbuild.io/prompt/sCErIenbSbPy1scqnRAV/react-hook-optimizer)