react-patterns

name	react-patterns
description	Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

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

Type	Use	State
Server	Data fetching, static	None
Client	Interactivity	useState, effects
Presentational	UI display	Props only
Container	Logic/state	Heavy state

Design Rules

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

---

2. Hook Patterns

When to Extract Hooks

Pattern	Extract When
useLocalStorage	Same storage logic needed
useDebounce	Multiple debounced values
useFetch	Repeated fetch patterns
useForm	Complex form state

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

Complexity	Solution
Simple	useState, useReducer
Shared local	Context
Server state	React Query, SWR
Complex global	Zustand, Redux Toolkit

State Placement

Scope	Where
Single component	useState
Parent-child	Lift state up
Subtree	Context
App-wide	Global store

---

4. React 19 Patterns

New Hooks

Hook	Purpose
useActionState	Form submission state
useOptimistic	Optimistic UI updates
use	Read resources in render

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

Use Case	Prefer
Reusable logic	Custom hook
Render flexibility	Render props
Cross-cutting	Higher-order component

---

6. Performance Principles

When to Optimize

Signal	Action
Slow renders	Profile first
Large lists	Virtualize
Expensive calc	useMemo
Stable callbacks	useCallback

Optimization Order

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

---

7. Error Handling

Error Boundary Usage

Scope	Placement
App-wide	Root level
Feature	Route/feature level
Component	Around risky component

Error Recovery

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

---

8. TypeScript Patterns

Props Typing

Pattern	Use
Interface	Component props
Type	Unions, complex
Generic	Reusable components

Common Types

Need	Type
Children	ReactNode
Event handler	MouseEventHandler
Ref	RefObject

---

9. Testing Principles

Level	Focus
Unit	Pure functions, hooks
Integration	Component behavior
E2E	User flows

Test Priorities

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

---

10. Anti-Patterns

❌ Don't	✅ Do
Prop drilling deep	Use context
Giant components	Split smaller
useEffect for everything	Server components
Premature optimization	Profile first
Index as key	Stable unique ID

---

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

Tool Availability Rules

Access	Behavior
Full tool access	Execute workflows, verify outputs, report errors.
Read-only	Inspect and plan; provide exact commands or dispatch request for writes.
No integration	State limitation; do not fabricate API results.

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