fix: react-doctor issues (conditional hooks, a11y, perf)

[joejohnson123]

Fixes from react-doctor scan.

---

Summary by cubic

Fixes react-doctor findings by correcting hook order in OrderSummary and improving accessibility. Also adds stable keys and small performance tweaks across components.

• Bug Fixes

  • Call all hooks before any early returns in OrderSummary to resolve hook-order error.
  • Replace index-based keys with stable keys in BackgroundBeams and AttachConfirmationInfo.
  • Add roles and keyboard handlers for interactive elements (CopyablePre, TagSelect, ProductListColumns).

• Performance

  • Use lazy state initialization in QuantityInput.
  • Import lodash/debounce directly to reduce bundle size.
  • Adjust initial animation scale in PlanSelectionCard to reduce layout shift.

^{Written for commit 67da824. Summary will update on new commits.}

Greptile Summary

Automated fixes from react-doctor scan addressing React best practices, accessibility, and performance issues.

Key Changes:

• Bug fixes: Fixed conditional hooks violation in OrderSummary.tsx by moving all useMemo calls before early return to comply with React's Rules of Hooks
• Improvements: Added keyboard accessibility (role, tabIndex, onKeyDown) to interactive elements in CopyablePre.tsx, TagSelect.tsx, and ProductListColumns.tsx
• Improvements: Replaced index-based React keys with stable identifiers (background-beams.tsx, attach-confirmation-info.tsx) for proper component reconciliation
• Improvements: Optimized performance by extracting constants for default props/arrays to prevent unnecessary re-renders (CopyablePre.tsx, TagSelect.tsx)
• Improvements: Changed animation initial scale from 0 to 0.95 in PlanSelectionCard.tsx to reduce layout shift
• Improvements: Added lazy state initialization in QuantityInput.tsx and switched to specific lodash imports in useCusProductQuery.tsx to reduce bundle size

Confidence Score: 4/5

• Safe to merge with one minor consideration in attach-confirmation-info.tsx
• All changes are focused, well-scoped improvements from automated tooling. The conditional hooks fix is critical and correct. Accessibility and performance improvements follow React best practices. One minor type safety concern exists in attach-confirmation-info.tsx where ReactNode is type-asserted to ReactElement, but all current code paths provide proper keys.
• vite/src/components/forms/attach-product/attach-confirmation-info.tsx - verify type assertion pattern is safe

Important Files Changed

Filename	Overview
apps/checkout/src/components/checkout/order-summary/OrderSummary.tsx	Fixed conditional hooks violation by moving all useMemo calls before early return
vite/src/components/forms/attach-product/attach-confirmation-info.tsx	Replaced index-based keys with React element keys for proper reconciliation
vite/src/components/general/CopyablePre.tsx	Added keyboard accessibility (role, tabIndex, onKeyDown) and extracted constant for default props
vite/src/components/v2/selects/TagSelect.tsx	Added ARIA role and keyboard handlers, extracted empty array constant to prevent re-renders
apps/checkout/src/components/bg/background-beams.tsx	Changed from index-based keys to path-based keys for stable identity
apps/checkout/src/components/checkout/plan/PlanSelectionCard.tsx	Changed initial scale from 0 to 0.95 to reduce layout shift and improve animation performance
apps/checkout/src/components/checkout/shared/QuantityInput.tsx	Optimized state initialization with lazy initializer function
vite/src/views/customers/customer/product/hooks/useCusProductQuery.tsx	Switched to specific lodash/debounce import to reduce bundle size
vite/src/views/products/products/components/product-list/ProductListColumns.tsx	Added ARIA toolbar role and keyboard event handling for accessibility

_{Last reviewed commit: 67da824}

_{(2/5) Greptile learns from your feedback when you react with thumbs up/down!}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
autumn-vite	Ready	Preview, Comment	Feb 19, 2026 9:02am

[cubic-dev-ai]

No issues found across 9 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[greptile-apps]

_{9 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Type assertion may fail at runtime if box is not a ReactElement. The renderInfoBoxes() function returns ReactNode[] which can include strings, numbers, fragments, etc. All current boxes do have explicit keys, but this is fragile.

Prompt To Fix With AI

This is a comment left during a code review.
Path: vite/src/components/forms/attach-product/attach-confirmation-info.tsx
Line: 138

Comment:
Type assertion may fail at runtime if box is not a ReactElement. The renderInfoBoxes() function returns ReactNode[] which can include strings, numbers, fragments, etc. All current boxes do have explicit keys, but this is fragile.

How can I resolve this? If you propose a fix, please make it concise.