Dexy Dexy / Explore / React 19 PR Review
Sign in

React 19 PR Review

Guidelines for reviewing React pull requests focusing on the React Compiler, 'use' hook, and Action hooks.

· 0 runs

About this playbook

Purpose

To ensure React pull requests utilize modern (v19+) best practices, including the React Compiler and native form handling, to minimize manual optimization and state management.

Prerequisites

  • Access to the GitHub Pull Request.
  • Knowledge of the project's design system and styling patterns.

Steps · 7

1 Step 1 – Understand Intent & Flow

Input: pr_context
Output: initial_notes
Gate: none
On error: abort

  • Read the PR description to identify the user-facing feature or bug fix.
  • Map out the component interactions and state changes.
2 Step 2 – React Compiler & Optimization

Input: component_code
Output: optimization_findings
Gate: none
On error: continue

  • React Compiler (v19+): Look for manual useMemo or useCallback. These should generally be removed as the compiler handles them automatically now.
  • Check for complex logic that might still require manual intervention or hint to the compiler.
3 Step 3 – Data Flow & 'use' Hook

Input: hook_usage
Output: data_flow_findings
Gate: none
On error: continue

  • Verify if the use() hook is used for promises and context instead of complex useEffect or useContext patterns.
  • Ensure async data fetching is handled cleanly without race conditions.
4 Step 4 – Native Form Actions

Input: form_code
Output: form_findings
Gate: none
On error: continue

  • Look for useActionState and useFormStatus to handle form logic and loading states natively.
  • Discourage the use of heavy third-party form libraries unless complex validation logic is required.
5 Step 5 – Component Design & TS

Input: prop_types, types
Output: design_findings
Gate: none
On error: continue

  • Ensure components are focused and props are clearly typed (Strict TypeScript).
  • Check for proper "Server vs. Client" typing if used in a framework like Next.js.
  • Look for derived state (calculate during render) instead of syncing state with useEffect.
6 Step 6 – UX & Accessibility

Input: component_markup
Output: a11y_findings
Gate: none
On error: continue

  • Verify keyboard navigation, ARIA roles, and semantic HTML.
  • Check for readable error and empty states.
7 Step 7 – Testing & Findings

Input: tests, all_findings
Output: review_report
Gate: none
On error: abort

  • Ensure high-impact hooks and components have accompanying tests.
  • Output findings by severity (P0-P3).
  • Provide clear suggestions for fixes.