React Patterns

React Patterns

Purpose

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

This skill provides operational guidance for React Patterns, including tool usage patterns, workflows, and quality expectations aligned with Syncolab skill standards.

When to Use

• Use when the user needs help with React Patterns.
• When integrations for this domain are available and the task matches the workflows below.

When NOT to Use

• When the task is unrelated to React Patterns or covered by a more specific skill.
• When required integrations or credentials are unavailable.

Expected Outcome

• Correct use of domain tools with verified results (not fabricated).
• Clear summary of actions taken, data returned, and recommended next steps.
• Errors and missing permissions reported explicitly.

Inputs to Gather

• User goal, constraints, and any identifiers (URLs, IDs, project keys).
• Available tool sets and connection status.
• Relevant context from related systems before destructive writes.

Workflow

1. Confirm the request maps to React Patterns and required tools are available.
2. Gather identifiers and scope (project, channel, repo, date range, etc.).
3. Follow the domain guidance below; prefer list/search before get/update when applicable.
4. Execute tool calls using schemas from the integration; never invent tool output.
5. Summarize results and offer logical follow-ups.

React Patterns

Principles for building production-ready React applications.

1. Component Design Principles

Component Types

Design Rules

• One responsibility per component
• Props down, events up
• Composition over inheritance
• Prefer small, focused components

2. Hook Patterns

When to Extract Hooks

Hook Rules

• Hooks at top level only
• Same order every render
• Custom hooks start with "use"
• Clean up effects on unmount

3. State Management Selection

State Placement

4. React 19 Patterns

New Hooks

Compiler Benefits

• Automatic memoization
• Less manual useMemo/useCallback
• Focus on pure components

5. Composition Patterns

Compound Components

• Parent provides context
• Children consume context
• Flexible slot-based composition
• Example: Tabs, Accordion, Dropdown

Render Props vs Hooks

6. Performance Principles

When to Optimize

Optimization Order

1. Check if actually slow
2. Profile with DevTools
3. Identify bottleneck
4. Apply targeted fix

7. Error Handling

Error Boundary Usage

Error Recovery

• Show fallback UI
• Log error
• Offer retry option
• Preserve user data

8. TypeScript Patterns

Props Typing

Common Types

9. Testing Principles

Test Priorities

• User-visible behavior
• Edge cases
• Error states
• Accessibility

10. Anti-Patterns

Remember: React is about composition. Build small, combine thoughtfully.

Tool Availability Rules

Related tool sets

• react
• typescript
• storybook

Review / Decision / Execution Criteria

• Prefer smallest safe change; confirm destructive actions with the user.
• Use evidence from tool responses; cite IDs and links when present.
• Match integration-specific conventions (JQL, RFC3339, A1 notation, etc.).

Output Format

Report:

1. What was requested and what was done.
2. Key results (tables or bullets).
3. Errors, blockers, or missing permissions.
4. Suggested next steps.

Quality Bar

• Specific, actionable, and grounded in tool output.
• Concise unless the user asked for detail.
• Respect rate limits, pagination, and API semantics.

Safety and Boundaries

• Do not commit secrets, tokens, or PII into skills or user-visible logs.
• Do not fabricate validation, send, or write confirmations.
• Confirm destructive operations (delete, destroy, mass update) when appropriate.

Escalation / Dispatch Rules

• If the task spans multiple domains, use or suggest related skills via relationships.skills.
• If write access is required but unavailable, dispatch or ask the user to enable tools.

References

• Legacy content migrated from skills/old_skills.json (react-patterns).
• skills/skill.instruction.md, skills/meta.instructions.md