Agent Skills
› NeverSight/learn-skills.dev
› modern-best-practice-react-components
modern-best-practice-react-components
GitHub指导构建符合现代 React (19+) 最佳实践的组件。强调使用函数组件、TypeScript 类型，避免不必要的 useEffect 和 useState，推荐通过派生值处理状态。主张组合优于配置，保持代码简洁、可维护且无副作用。
Trigger Scenarios
需要编写或重构 React 组件
询问 React 最佳实践
优化组件性能与结构
Install
npx skills add NeverSight/learn-skills.dev --skill modern-best-practice-react-components -g -y
SKILL.md
Frontmatter
{
"name": "modern-best-practice-react-components",
"description": "Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage"
}
Writing React Components
We're using modern React (19+) and we're following common best practices focused on clarity, correctness, and maintainability.
Component Structure & Style
- PREFER small, focused components with a single responsibility
- PREFER named
functioncomponents over arrow functions- Exception: anonymous callbacks, inline render props, and closures
- PREFER explicit return types and props typing (TypeScript) where applicable
- Keep components flat and readable; avoid deeply nested JSX
- Group related logic together (event handlers, derived values, helpers)
State Management
- AVOID
useEffect()- See the "You Might Not Need An Effect" guide for detailed guidance
- PREFER deriving values during render instead of synchronizing state
- Fetch data via TanStack Query (
@tanstack/react-query)
- AVOID unnecessary
useState()oruseReducer()usage- Derive state from props or other state when possible
- Localize state to the lowest possible component
- DO NOT mirror props in state unless absolutely necessary
- Prefer controlled components over syncing uncontrolled state
Rendering & Derivation
- PREFER computing derived values inline or via helper functions
- Use
useMemo()sparingly and only for proven performance issues - AVOID premature optimization
- Keep render logic deterministic and free of side effects
Event Handling
-
AVOID in-line event handlers in JSX
-
PREFER:
function handleClick() { // ... } <button onClick={handleClick} />; -
Over:
<button onClick={() => { /* ... */ }} />
-
-
Name handlers clearly (
handleSubmit,handleChange,handleClose) -
Keep handlers small; extract complex logic into helpers
Effects, Data, and Side Effects
- AVOID effects for:
- Derived state
- Data transformations
- Event-based logic that can live in handlers
- If side effects are unavoidable, keep them minimal, isolated, and well-documented
- Prefer framework-level or external abstractions (routers, data libraries) over raw effects
Props & Composition
- PREFER composition over configuration
- AVOID excessive boolean props; prefer expressive APIs
- Use
childrenintentionally and document expected structure - Keep prop names semantic and predictable
Performance & Stability
- PREFER stable references only when required (not by default)
- AVOID unnecessary memoization (
memo,useCallback) unless absolutely required - Keep keys stable and meaningful when rendering lists
General Principles
- Write code for humans first, compilers second
- Prefer explicitness over cleverness
- Optimize for readability and long-term maintenance
- If a pattern feels complex, reconsider the component boundary
Version History
- e0220ca Current 2026-07-05 22:49
