react-best-practices

React component performance issues are caught by running rule-based validations on edited TSX/JSX files to check hook usage, component structure, TypeScript patterns, and rendering behavior. This process prevents unnecessary re-renders, hydration issues, and accessibility regressions before they reach production.

Common React and Next.js anti-patterns include inefficient rendering behavior, unsafe component structures, RSC/client prop serialization issues, and hydration mismatches. Evaluating TSX components detects these performance regressions alongside accessibility concerns and TypeScript pattern misuse.

Reviewing React components for accessibility and TypeScript patterns involves evaluating edited TSX/JSX files against rule-based validations. This checks component structure, hook usage, and rendering behavior to identify and fix code quality problems before they become bugs.

Yes, the React code review works with Next.js and applies rule-based validations to matching path patterns under src/components, app/components, components, src/ui, and lib/components. It specifically targets common Next.js pitfalls after multi-file edits.

Yes, legacy styling and component libraries like styled-components, Emotion, MUI, and Chakra are detected during TSX component review. The validation provides targeted rule escalation and suggests an upgrade path to shadcn/ui and Tailwind.

The best way to fix React rendering and hydration issues is to apply a reviewer to recently edited TSX files and follow the returned checklist. This identifies inefficient RSC/client prop serialization and modernizes components to resolve performance findings.