refactor: migrate to React 19 ref pattern & Context #5831
Conversation
…s and explicit ref declarations from all components
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
jrgarciadev
changed the title
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
jrgarciadev
changed the title
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| {kbdKeysMap[keyValue]} | ||
| </abbr> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Bug: Ref Forwarding Fails Across Components
Ref forwarding is broken across several components. The ref prop is no longer correctly passed down to the underlying DOM elements or primitive components, which silently ignores refs and breaks functionality for consumers relying on direct element access.
Additional Locations (10)
packages/react/src/components/textarea/textarea.tsx#L11-L23packages/react/src/components/input/input.tsx#L11-L23packages/react/src/components/label/label.tsx#L9-L23packages/react/src/components/button/button.tsx#L46-L56packages/react/src/components/close-button/close-button.tsx#L44-L58packages/react/src/components/input-otp/input-otp.tsx#L32-L50packages/react/src/components/separator/separator.tsx#L9-L26packages/react/src/components/field-error/field-error.tsx#L11-L26packages/react/src/components/skeleton/skeleton.tsx#L12-L30packages/react/src/components/link/link.tsx#L25-L39
| {children} | ||
| </TextPrimitive> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Bug: Ref Ignored in Functional Components
After the refactor from React.forwardRef to plain functional components, several components (like Label, Description, Input, Separator, Text, FieldError, Link, and LinkIcon) declare a ref prop in their interfaces but don't destructure or forward it to their underlying elements. This causes refs to be silently ignored, breaking ref functionality for consumers.
Additional Locations (6)
packages/react/src/components/description/description.tsx#L9-L24packages/react/src/components/field-error/field-error.tsx#L11-L26packages/react/src/components/link/link.tsx#L25-L39packages/react/src/components/separator/separator.tsx#L9-L26packages/react/src/components/input/input.tsx#L11-L23packages/react/src/components/label/label.tsx#L9-L23
This pull request refactors several React component implementations to remove the use of
React.forwardRef, simplify type definitions, and clean up context provider usage. The changes focus on improving code clarity, maintainability, and consistency across theaccordion,alert,avatar, andbuttoncomponents. The most important changes are grouped below by theme.Refactoring Components to Remove
forwardRefaccordion.tsx,alert.tsx,avatar.tsx, andbutton.tsxhave been refactored to use plain functional components instead ofReact.forwardRef. This simplifies the code, removes unnecessaryrefhandling, and streamlines type definitions. [1] [2] [3] [4] [5] [6] [7]React 19 docs: https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop
Context Provider Simplification
accordion.tsx,alert.tsx, andavatar.tsxhave been changed from<Context.Provider>to direct<Context>usage, eliminating redundant provider boilerplate and making context usage more idiomatic. [1] [2] [3]React 19 docs: https://react.dev/blog/2024/12/05/react-19#context-as-a-provider
Type Definition Improvements
React.ComponentPropsor similar utility types for better compatibility and clarity, replacing custom or primitive prop types. [1] [2] [3]Removal of Display Names
displayNameassignments for components have been removed except forAlertActionandAlertClose, which now use a simplified display name. This reduces unnecessary metadata and aligns with current best practices. [1] [2] [3]Avatar Component Modernization
avatar.tsxcomponent now uses the latest Radix UI Avatar API, updates prop handling forAvatarImage, and improves fallback and image loading logic for better reliability and flexibility. [1] [2]These changes collectively modernize and simplify the codebase, making it easier to maintain and extend.
Note
Rewrites many UI components to drop forwardRef in favor of ref-as-prop and Context-as-Provider, updates types/APIs (notably Avatar), and trims legacy exports/displayNames.
React.forwardRefwith plain functions using ref-as-prop; switch from<Context.Provider>to<Context value={...}>across components.displayNameassignments.React.ComponentProps<...>and specific primitive prop types; normalize props (e.g.,svg,div,Heading).@radix-ui/react-avatarnamespace API (Root/Image/Fallback), expandAvatarImageprops (srcSet/sizes/loading/crossOrigin), integrateuseImagestatus handling.Input,TextArea,Label,Description,FieldError,Formsignatures and styling hooks.Calendar,ListBox,Tabs,Slider,RadioGroup,Switch,Popover,Tooltip,Card,Chip,Button,CloseButton,Kbd,Link,Separator,Skeleton,Spinnerto new patterns.Root,Item,Marks, etc., consolidating to primary component exports.Written by Cursor Bugbot for commit c55cc16. This will update automatically on new commits. Configure here.