react-patterns

Original：🇺🇸 English

Translated

Expert guidance on modern React patterns including hooks, composition, state management, and concurrent features. Use when implementing React components or refactoring existing code.

1installs

Sourcemajesticlabs-dev/majestic-marketplace

Added on2026-02-21

NPX Install

npx skill4agent add majesticlabs-dev/majestic-marketplace react-patterns

SKILL.md Content

View Translation Comparison →

React Patterns

Expert guidance for implementing modern React patterns using hooks, component composition, state management, and concurrent features.

Core Philosophy

Priority	Description
Component Composition	Build complex UIs from simple, reusable pieces
Separation of Concerns	Business logic in hooks, presentation in components
Explicit over Implicit	Clear data flow and state management
Performance	Minimize re-renders, optimize heavy computations
Accessibility	Build inclusive, keyboard-navigable interfaces

Pattern Categories

Component Composition Patterns

Pattern	Use Case	Example
Compound Components	Flexible component APIs with shared context	Accordion, Tabs, Menu
Render Props	Share logic between components	MouseTracker, Scroll position
Higher-Order Components	Wrap components to add functionality	withAuth, withLoading

See references/examples.md for full code examples.

Custom Hooks Patterns

Hook	Purpose
`useApi`	Data fetching with loading/error states
`useForm`	Form state management with validation
`useDebounce`	Debounce rapidly changing values
`usePrevious`	Access previous value of state/prop
`useLocalStorage`	Persist state to localStorage

See references/examples.md for implementations.

State Management Patterns

Type	When to Use	Examples
useState	Simple UI state	Toggles, form inputs, pagination
useReducer	Complex state logic	Multi-step forms, shopping cart
Context	Theme, auth, app-wide settings	User session, feature flags
URL State	Shareable/bookmarkable state	Filters, search params, tabs
Server State	API data (React Query/SWR)	User profiles, product catalogs
Global Store	Cross-feature coordination	Zustand/Redux for complex apps

Context + useReducer Pattern: Best for complex state with multiple actions that need to be shared across components. See references/examples.md.

Performance Optimization

When to Use Memoization

Tool	Use When
`useMemo`	Expensive calculations (sorting, filtering large arrays)
`useCallback`	Functions passed to memoized children or used in deps
`memo`	Pure components that re-render often with same props

Code Splitting Strategy

Level	Implementation
Route-level	`lazy(() => import('./pages/Dashboard'))`
Component-level	Heavy components like charts, editors
Conditional	Features behind feature flags

Always wrap lazy components in
<Suspense>
with appropriate fallback.

Error Handling

Strategy	Scope
Error Boundaries	Component tree errors (class components)
try/catch	Async operations, event handlers
React Query onError	API errors with automatic retry

Error Boundary Placement: App-level for fatal errors, feature-level for graceful degradation.

Accessibility Patterns

Requirement	Implementation
Focus Management	Return focus to trigger on modal close
Keyboard Navigation	Support Tab, Enter, Escape in interactive elements
ARIA Labels	Icon buttons, form inputs without visible labels
Semantic HTML	Use `<nav>` , `<main>` , `<button>` appropriately

See references/examples.md for accessible modal implementation.

Best Practices Checklist

Extract custom hooks when logic is reused or complex (>20 lines)
Use compound components for flexible component APIs
Memoize expensive computations and callbacks passed to memoized children
Code split routes and heavy components
Handle errors with error boundaries at appropriate levels
Manage focus in modals and dynamic content
Use semantic HTML and ARIA labels for accessibility
Test hooks in isolation from components
Keep components small (< 200 lines)
Colocate state with its usage