modern-best-practice-react-components_skill

Overview

This skill helps you build clean, modern React components that follow practical best practices and avoid common pitfalls like unnecessary state and overused effects. It focuses on clarity, maintainability, and predictable rendering for modern React (v19+). The guidance emphasizes small components, explicit typing, and preferring derivation over synchronization.

How this skill works

The skill inspects component structure, state usage, event handlers, and side-effect patterns to recommend simpler alternatives. It flags mirrored props in state, inline event handlers, excessive use of useEffect/useState/useMemo, and anti-patterns like premature memoization. It also suggests concrete replacements: derive values in render, localize state, use TanStack Query for data, and favor named function components.

When to use it

• When creating or refactoring React components to improve readability and correctness
• When you notice excessive use of useEffect, useState, or useMemo
• When components have deeply nested JSX or mixed responsibilities
• When props are being mirrored into local state or uncontrolled sync is used
• When event handlers are inlined in JSX or have unclear names

Best practices

• Write small, single-responsibility components and keep boundaries clear
• Prefer named function components and explicit prop/return typing (TypeScript)
• Derive values during render instead of syncing state; avoid mirroring props
• Avoid useEffect for derived data or event logic; use handlers and data libraries
• Keep handlers named, small, and extracted; avoid inline JSX callbacks
• Use memoization and stable refs only when profiling shows a real need

Example use cases

• Refactor a form component that mirrors props into useState and has multiple effects
• Create a list renderer that suffered from unnecessary useMemo and unstable keys
• Design a small UI widget that should be controlled by parent props instead of internal state
• Replace ad-hoc data fetching and sync effects with TanStack Query and simple renders
• Simplify a modal component by extracting handlers and deriving visibility from props