React Best Practices Skill

A Claude Code skill for building high-performance React applications — covering component patterns, state management, rendering optimization, hooks best practices, and accessibility standards.

When to Use This Skill

Choose this skill when:

• Building React components following modern patterns
• Optimizing React rendering performance
• Implementing state management with hooks and context
• Writing accessible React components
• Structuring React applications for scalability
• Reviewing React code for anti-patterns

Consider alternatives when:

• You need Next.js-specific patterns (use a Next.js skill)
• You need a different framework (use Vue, Svelte, or Angular skills)
• You need a component library guide (use MUI, Tailwind, etc.)

Quick Start

Copy
# Create a new React project
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install

Copy
// Modern React component pattern
interface UserCardProps {
  user: User;
  onSelect?: (user: User) => void;
}

export function UserCard({ user, onSelect }: UserCardProps) {
  return (
    <article
      className="user-card"
      onClick={() => onSelect?.(user)}
      role={onSelect ? 'button' : undefined}
      tabIndex={onSelect ? 0 : undefined}
    >
      <img src={user.avatar} alt="" width={48} height={48} />
      <div>
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    </article>
  );
}

Core Concepts

Component Best Practices

Rule	Do	Don't
Props	Destructure in parameters	Access props.name
State	Derive from existing state	Duplicate state
Effects	Run only for side effects	Compute values
Keys	Use stable unique IDs	Use array index
Events	Use handler functions	Inline arrow functions in JSX
Refs	Access DOM, store values	Store renderable state

State Management Decision

Copy
Where should state live?

1. Local state (useState)
   → Used by one component only

2. Lifted state (parent useState)
   → Shared by siblings

3. Context (createContext + useContext)
   → Shared by many components in a subtree
   → Doesn't change frequently

4. External store (Zustand, Jotai)
   → Global state
   → Frequent updates
   → Complex state logic

Performance Patterns

Copy
// Avoid unnecessary re-renders with proper component splitting
// BAD: Entire list re-renders when count changes
function Page() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveList items={items} />  {/* Re-renders unnecessarily */}
    </div>
  );
}

// GOOD: Split into separate components
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

function Page() {
  return (
    <div>
      <Counter />
      <ExpensiveList items={items} />  {/* Only re-renders when items change */}
    </div>
  );
}

Configuration

Parameter	Type	Default	Description
react_version	string	"19"	React version
strict_mode	boolean	true	Enable React Strict Mode
state_management	string	"context"	State: context, zustand, jotai, redux
styling	string	"tailwind"	Styling: tailwind, css-modules, styled-components
testing	string	"vitest"	Testing: vitest, jest
accessibility	string	"AA"	WCAG compliance level

Best Practices

1. Split components by state boundaries — components should re-render only when their own state changes; move state down to the lowest component that needs it.

2. Use useCallback and useMemo only when profiling shows a need — premature memoization adds complexity without measurable benefit; the React compiler (React 19) handles most cases automatically.

3. Prefer composition over configuration — instead of a component with 15 props, compose smaller components: <Card><CardHeader /><CardBody /><CardFooter /></Card>.

4. Always provide accessible names for interactive elements — buttons need visible text or aria-label, images need alt text, and form inputs need associated labels.

5. Use key with stable, unique IDs, never array indices — array indices cause bugs when items are reordered, filtered, or deleted; use database IDs or unique identifiers.

Common Issues

Components re-render too often — Use React DevTools Profiler to identify which components re-render and why. Common causes: inline objects/functions as props, state lifted too high, and missing component boundaries.

useEffect runs on every render — Missing or incorrect dependency array. Include all values used inside the effect in the dependency array, and use useRef for values that shouldn't trigger re-runs.

State updates don't reflect immediately — React batches state updates; setState doesn't update the value synchronously. Use the functional form setState(prev => prev + 1) when the new state depends on the previous state.