React Best Practices

Core Best Practices

Keep components small and focused. Colocate state. Prefer composition over inheritance. Use TypeScript and ESLint. Separate server state (TanStack Query) from client state.

Test behavior users see with Testing Library. Design accessible UI from the start — not as an afterthought.

// Good: focused component, typed props, accessible
function SubmitButton({ loading, children }: SubmitButtonProps) {
  return (
    <button type="submit" disabled={loading} aria-busy={loading}>
      {children}
    </button>
  );
}

Small components with clear names are easier to test and reuse.

Practice Categories

Components  → small, composable, typed
State       → colocate, right tool per layer
Effects     → minimal, cleanup always
Performance → measure first
A11y        → semantic HTML, ARIA when needed
Testing     → user behavior, not implementation

• Follow official React docs "Rules of React" and hooks rules.
• Code review for state ownership and effect necessity.
• Consistent folder structure across the team.
• Document architectural decisions in ADRs for large apps.

Best Practices Checklist

Quick audit list for React code reviews.

Scalable Folder Structure

Feature folders (features/auth/) scale better than type folders (components/, reducers/) for large apps. Include components, hooks, api, and tests per feature.

Testing Practices

Test user-visible behavior with React Testing Library. Mock network with MSW. Avoid testing implementation details like internal state.

Common Mistakes

• Premature abstraction and over-engineering.
• Ignoring accessibility until audit time.
• No linting or type checking in CI.
• Copy-pasting patterns without understanding trade-offs.

Key Takeaways

• Small components, colocated state, composition first.
• Separate server and client state tools.
• Profile before optimizing; test user behavior.
• Accessibility and TypeScript are baseline quality.