Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[utils] Make getReactElementRef React 19 compatible #44034

Merged

Conversation

aarongarciah
Copy link
Member

Extracted from #42824

@aarongarciah aarongarciah added package: utils Specific to the @mui/utils package typescript React 19 support PRs required to support React 19 labels Oct 7, 2024
@mui-bot
Copy link

mui-bot commented Oct 7, 2024

Netlify deploy preview

https://deploy-preview-44034--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against c6fcf27

export default function getReactElementRef(
element: React.ReactElement,
): React.Ref<any> | null | undefined {
export default function getReactElementRef(element: React.ReactElement): React.Ref<any> | null {
Copy link
Member Author

@aarongarciah aarongarciah Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function now returns a ref or null, no more undefined. This makes it behave the same in React 18 and React 19. Before this PR, in React 18 it returned undefined in some scenarios and in React 19 it returned null for the same scenarios.

// 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
if (parseInt(React.version, 10) >= 19) {
return element.props?.ref;
return (element?.props as any)?.ref || null;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apart from making it return null when there's no ref, two other changes in this line:

  • element.props is unknown so we need to cast it. With React 19 types, TS reports this error: Property 'ref' does not exist on type '{}'
  • Optional chaining added to element so it doesn't fail in test cases where the value passed in undefined (getReactElementRef())

@aarongarciah aarongarciah marked this pull request as ready for review October 7, 2024 12:15
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, seems like we don't need any other code changes as setRef already checks for null or undefined, so we are safe.

@aarongarciah aarongarciah merged commit edefd06 into mui:master Oct 8, 2024
22 checks passed
@aarongarciah aarongarciah removed the request for review from DiegoAndai October 8, 2024 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: utils Specific to the @mui/utils package React 19 support PRs required to support React 19 typescript
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants