React Components and Hooks

Reusable patterns for scalable React codebases.

When to Use

Use this skill when:

• Writing or refactoring .tsx components

• Extracting hooks into hooks/<area>/useXxx.ts

• Removing helpers from components/hooks into utils/

• Removing inline types into types/

Non-Negotiables (MUST)

• Exactly one exported component per .tsx file.

• Exactly one exported hook per hook file (hooks/<area>/useXxx.ts ).

• No helper functions inside components or hooks; extract helpers to utils/ .

• No inline types inside components or hooks; import from types/ .

• Prefer server-side rendering boundaries wisely (avoid 'use client' for large subtrees).

Rules

Component Patterns

• react-one-component-per-file

• One component per file (STRICT)

• react-client-vs-server

• Client vs Server Components (App Router)

• react-folder-namespacing

• Folder namespacing for complex components

• react-performance

• Performance optimization (memo, useCallback)

• react-accessibility

• Accessibility best practices

Hooks Best Practices

• react-one-hook-per-file

• One hook per file (STRICT)

• react-no-helpers-in-hooks

• No helpers inside hooks (STRICT)

• react-no-types-in-hooks

• No types inside hooks (STRICT)

• react-stable-api

• Stable API for hooks

• react-side-effects

• Side effects in hooks

Related Skills

• busirocket-core-conventions

• General file structure and boundaries

• busirocket-typescript-react-standards

• TypeScript and type conventions

• busirocket-nextjs-route-handlers

• Server vs Client Components (detailed)

How to Use

Read individual rule files for detailed explanations and code examples:

rules/react-one-component-per-file.md rules/react-one-hook-per-file.md rules/react-client-vs-server.md

Each rule file contains:

• Brief explanation of why it matters

• Code examples (correct and incorrect patterns)

• Additional context and best practices