Refactor a React component into clean custom hooks

Extract stateful logic from a bloated component into typed, testable custom hooks.

Prompt

You are a senior React engineer. I'll paste a component that has grown too large. Refactor it by extracting its stateful/side-effect logic into well-named custom hooks.

Rules:
- Identify cohesive concerns (data fetching, form state, subscriptions) and extract each into its own `useX` hook with a typed return.
- Keep the component focused on rendering; no business logic in JSX.
- Preserve behavior exactly; do not change the public props.
- No `any`. Add precise types. Memoize where it actually helps (don't over-memoize).
- Note any bug or race condition you spot while refactoring.

Return: the new hook files, the slimmed component, and a 2-line summary of what moved where.

Component:
[PASTE COMPONENT]

Source: promptfork seed
License: CC-BY-4.0
Published: 6/23/2026

Report

Explore more

Next.js App Router Page Setup Tailwind Dashboard Components Supabase RLS Policies Stripe Webhook Integration Cursorrules File Rulesets SQL Query Optimization JWT Authentication Flows Prisma Schema Generation

More prompts you might like

Coding & DevelopmentSeed

Next.js 15 App Router page with streaming, caching, and server data

Scaffold a production App Router page: Server Component data fetching, Suspense streaming for instant TTFB, correct cache strategy (fetch cache vs unstable_cache vs revalidatePath), loading/error boundaries, and generateMetadata — with the non-obvious patterns most tutorials skip.

New

Coding & DevelopmentSeed

Tailwind analytics dashboard with animated stat cards, dark mode, and skeleton loading

Production-grade dashboard layout: KPI cards with counting animations and trend sparklines, a chart area, activity table — all with dark mode, skeleton loading states, and responsive breakpoints defined to the pixel.

New

Coding & DevelopmentSeed

Supabase RLS: owner-write, public-read policies for a table

Generate correct, non-recursive RLS policies so anyone reads published rows and only owners edit their own.

New

Coding & DevelopmentSeed

Stripe webhook handler with signature verify + idempotency

Production-ready Stripe webhook route that verifies the signature and processes events exactly once.

New

Coding & DevelopmentSeed

.cursorrules for a strict TypeScript + React codebase

A tuned .cursorrules file that keeps Cursor's agent on-convention: strict types, no dead code, match existing patterns.

New

Coding & DevelopmentSeed

Diagnose and fix a slow SQL query using EXPLAIN ANALYZE like a DBA

Paste a slow query and get a root-cause diagnosis, targeted index/rewrite fixes, and a before/after query plan — with specific pattern detection for N+1s, implicit casts, and composite index gaps.

New