React
The skill is based on React, generated at 2026-01-31.
React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.
Core References
| Topic | Description | Reference |
|---|
| useState | Hook for managing component state with direct updates | core-usestate |
| useEffect | Hook for synchronizing components with external systems | core-useeffect |
| useContext | Hook for reading and subscribing to context | core-usecontext |
| useRef | Hook for referencing values that don't trigger re-renders | core-useref |
| useReducer | Hook for managing complex state with a reducer function | core-usereducer |
| Suspense | Component for displaying fallback UI while content is loading | core-suspense |
| memo | Higher-order component for memoizing component renders | core-memo |
| createContext | API for creating context objects | core-createcontext |
| Fragment | Component for grouping elements without wrapper nodes | core-fragment |
| StrictMode | Component for enabling additional development checks | core-strictmode |
Features
Performance Optimization
Advanced Hooks
React DOM APIs
React Server Components
| Topic | Description | Reference |
|---|
| cache | API for caching function results in Server Components | rsc-cache |
Advanced Components
Testing
| Topic | Description | Reference |
|---|
| act | Test helper for applying pending updates before assertions | testing-act |
Best Practices
Key Recommendations
- Use hooks at the top level - Never call hooks conditionally or in loops
- Keep components pure - Components should be idempotent and have no side effects during render
- Use useEffect for side effects - Synchronize with external systems using Effects
- Memoize expensive calculations - Use
useMemo for costly computations, useCallback for functions passed to memoized components - Code split with lazy - Use
lazy and Suspense for route-based code splitting - Avoid premature optimization - Profile first, optimize only when needed
- Use React Compiler - Consider using React Compiler for automatic memoization
- Handle dependencies correctly - Always include all reactive values in Effect and memoization dependencies
