React and Next.js Patterns Review
By blake w. · Published · Updated
Reviews a React or Next.js codebase for component structure, state placement, data fetching, form handling, and accessibility, with fixes ranked by user impact.
Prompt template
## React and Next.js Patterns Review Review these components and tell me what to change first. - The code: [textarea: Paste the components or route files] - Framework: [dropdown: React with Vite, Next.js App Router, Next.js Pages Router, Remix] - What the screen does: [text: Short description of the feature] - Focus: [multi: Component design, State, Data fetching, Forms, Accessibility, Performance, Server and client split] - Data library: [text: e.g. React Query or none] Look at state first: keep it as close to where it is used as possible, derive values instead of storing them, and flag effects that only copy props into state. For data fetching, check loading and error states exist, requests are not duplicated, and server components fetch on the server when the framework allows it. Mark a client boundary only where interactivity needs it. For forms, check labels, validation messages tied to fields, disabled states during submit, and that a failed submit keeps what the person typed. For accessibility, check semantic elements before ARIA, keyboard reach and focus order, visible focus, and alt text. Report each finding with the file, the user-facing consequence, and a corrected snippet. Order by impact on users, and end with one paragraph on the biggest structural change worth planning.