React patterns Claude Code gets right (and three it gets wrong)

React is a strong area for Claude Code — the patterns are well-established and Claude has seen a lot of React code. But there are a few consistent failure modes to know about.

What Claude reliably gets right

Component extraction. "Extract this JSX block into a component called X" — Claude does this correctly, handles prop types, moves event handlers appropriately.

Hook creation. "Extract this state management into a custom hook." Claude writes clean hooks with correct dependency arrays most of the time.

Event handlers. Form handling, click handlers, controlled inputs — these are mechanical and Claude gets them right.

Conditional rendering. Standard patterns (short-circuit &&, ternary, early return) — Claude picks the appropriate one based on your existing code patterns.

Pattern 1: useEffect dependency arrays

This is the most consistent mistake. Claude sometimes gets dependency arrays wrong — either missing dependencies or including things that cause infinite loops.

Fix: Add to CLAUDE.md: "Always run React's exhaustive-deps rule mentally for useEffect. Include all values from the component scope that are used inside the effect. Use useCallback or useMemo to stabilize references that would otherwise cause loops."

Also: use eslint-plugin-react-hooks. It catches this automatically.

Pattern 2: key props in lists

Claude uses array index as key when it doesn't know a better identifier: key={index}. This causes subtle bugs when list items are reordered or removed.

Fix: Add to CLAUDE.md: "Never use array index as key. Use the item's unique identifier. If items don't have unique IDs, note this and ask."

Pattern 3: State structure

For complex state, Claude sometimes creates multiple useState calls when a single useReducer would be cleaner, or derives state that should be computed from other state.

Fix: Add an example of your preferred state structure to CLAUDE.md. Claude matches existing patterns better than it invents new ones.