5 React Prompts That Save Me Hours Every Week

Long Phạm — Thu, 12 Mar 2026 04:53:57 +0000

I've been using AI to write React code for over a year.

For the first few months, the output was consistently mediocre — wrong patterns, missing types, no error handling. I kept thinking the AI just wasn't good enough.

Turns out I was wrong. The AI was fine. My prompts were the problem.

Here are the 5 prompts I now use almost every day.

Every prompt below follows the same structure: Role → Context → Task → Constraints → Output format. The more elements you include, the better the output.

1. Generate a fully typed reusable component

You are a senior React developer specializing in TypeScript and Tailwind CSS.

Context: React 18, TypeScript strict mode, Tailwind CSS v3.

Task: Create a reusable <Button> component with:
- Variants: primary | secondary | danger | ghost
- Sizes: sm | md | lg
- States: default, loading (spinner), disabled
- Props: leftIcon, rightIcon, fullWidth, isLoading

Constraints:
- No external UI libraries
- Use React.forwardRef
- No 'any' types
- Tailwind only, no inline styles

Return only the .tsx file.

2. Create a React Query hook with full error handling

You are a senior React developer.

Context: TanStack Query v5, Axios, TypeScript strict.

Task: Create a useProjects(filters) hook that:
- Fetches GET /api/projects with filters as query params
- Query key: ['projects', filters]
- staleTime: 60 seconds
- Returns: { projects, totalCount, isLoading, isFetching, error }

Constraints:
- TanStack Query v5 syntax only (not v4)
- No 'any' types — type the full API response

Return only the hook file.

3. Build a form with validation in one shot

You are a senior React developer.

Context: React Hook Form v7, Zod, TypeScript, Tailwind CSS.

Task: Create a <CreateProjectForm> with:
- name: string, required, min 2 chars, max 80 chars
- priority: enum ['low', 'medium', 'high'], required
- dueDate: date, must be in the future

Requirements:
- Zod schema with inferred TypeScript type
- Inline validation errors on blur
- Submit button disabled until valid
- Loading state on submit

Return the component + Zod schema in one .tsx file.

4. Write unit tests for a custom hook

You are a senior React developer writing tests.

Context: Vitest, @testing-library/react renderHook, vi.mock.

Task: Write complete tests for the useProjects hook.
Mock the entire @/services/http module.

Cover:
✓ Returns projects array on success
✓ isLoading is true initially, false after fetch
✓ Sets error when API returns 500
✓ Handles empty results array

Pattern: arrange → act → assert. Clear test names.

5. Review a component for performance issues

Review this React component for performance issues. Check for:

1. Unnecessary re-renders
2. Missing useMemo on expensive calculations
3. Functions that should use useCallback
4. Object/array literals created inline (new reference every render)

For each issue: show the problematic code, explain the problem,
show the fix, rate severity: low / medium / high.

[paste your component here]

The pattern behind all 5

Element	Purpose
Role	Sets expertise level
Context	Tells AI your exact stack
Task	Describes what to build precisely
Constraints	Tells AI what NOT to do
Output	Controls how code is delivered

Miss any one of these and you get generic output. Include all five and you get production-ready code.

I compiled 50 of these prompts — covering components, state, APIs, testing, and deployment — into a 57-page ebook.

buildwithprompts.gumroad.com

What prompts do you use most? Drop them in the comments.