feat: polish types to be compatible with React 18.3 #4735
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
LLM Analysis of PR ChangesSummaryThis PR updates the React and React DOM dependencies to be compatible with React 18.3. It also adds type casting to React.RefObjects in several components to resolve TypeScript errors related to stricter type checking in React 18. Key Points to Review
Style & Consistency
|
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
3b98f1e to
b21d412
Compare
Deploying orbit with
|
| Latest commit: |
3a03910
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2fa98834.orbit.pages.dev |
| Branch Preview URL: | https://sarka-react-upgrade-fix.orbit.pages.dev |
|
Size Change: +39 B (+0.01%) Total Size: 464 kB
ℹ️ View Unchanged
|
![callstackai[bot]](https://avatars.githubusercontent.com/in/1040204?s=60&v=4){kind=small}
There was a problem hiding this comment.
Key Issues
The incorrect return type React.RefObject<T> that doesn't account for null values could lead to runtime errors if not handled properly. Suppressing type errors with // @ts-expect-error without proper checks can cause runtime issues, especially if scrollingElementRef is not a valid React ref object. Removing null from ref types is unsafe as React refs can be null before mounting or if the element is unmounted, potentially causing runtime errors.
Comment on lines
+95
to
97
| // @ts-expect-error TODO | ||
| // eslint-disable-next-line no-param-reassign | ||
| scrollingElementRef.current = node; |
There was a problem hiding this comment.
🐛 Possible Bug
The // @ts-expect-error suppresses a type error without proper type checking. If scrollingElementRef is not a valid React ref object with a current property, this assignment could cause runtime errors. Consider adding proper type guards or using MutableRefObject type.
Suggested change
| // @ts-expect-error TODO | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| if (scrollingElementRef && 'current' in scrollingElementRef) { | |
| scrollingElementRef.current = node; | |
| } |
| @@ -21,7 +21,7 @@ export type Props = Common.Globals & | |||
| closable & { | |||
| readonly size?: Size; | |||
| readonly children: React.ReactNode; | |||
| readonly triggerRef?: React.RefObject<HTMLElement | null>; | |||
| readonly triggerRef?: React.RefObject<HTMLElement>; | |||
There was a problem hiding this comment.
🐛 Possible Bug
Removing null from RefObject and Ref types is unsafe as React refs can be null before the component mounts or if the referenced element is unmounted. This can lead to runtime errors when accessing these refs.
Suggested change
| readonly triggerRef?: React.RefObject<HTMLElement>; | |
| readonly triggerRef?: React.RefObject<HTMLElement | null>; |
| @@ -21,7 +21,7 @@ export type Props = Common.Globals & | |||
| closable & { | |||
| readonly size?: Size; | |||
| readonly children: React.ReactNode; | |||
| readonly triggerRef?: React.RefObject<HTMLElement | null>; | |||
| readonly triggerRef?: React.RefObject<HTMLElement>; | |||
| readonly lockScrolling?: boolean; | |||
| readonly scrollingElementRef?: React.Ref<HTMLElement | null>; | |||
There was a problem hiding this comment.
🐛 Possible Bug
The scrollingElementRef should allow for null values as the ref might not be initialized immediately or could become null during component lifecycle.
Suggested change
| readonly scrollingElementRef?: React.Ref<HTMLElement | null>; | |
| readonly scrollingElementRef?: React.Ref<HTMLElement | null>; |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
b21d412 to
3ec7c79
Compare
|
Storybook staging is available at https://kiwicom-orbit-sarka-react-upgrade-fix.surge.sh Playroom staging is available at https://kiwicom-orbit-sarka-react-upgrade-fix.surge.sh/playroom |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
10 times, most recently
from
f42a789 to
eb8a6fe
Compare
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
eb8a6fe to
ba76d33
Compare
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
ba76d33 to
c8cd84c
Compare
There was a problem hiding this comment.
Key Issues
The use of any type for the callback parameter bypasses TypeScript's type checking, risking runtime errors; it should be explicitly typed to ensure type safety. Suppressing type mismatches with @ts-expect-error without proper validation can lead to runtime errors if types are not as expected, necessitating type validation or assertions.
Comment on lines
+95
to
97
| // @ts-expect-error TODO | ||
| // eslint-disable-next-line no-param-reassign | ||
| scrollingElementRef.current = node; |
There was a problem hiding this comment.
🐛 Possible Bug
The @ts-expect-error comment suppresses a type mismatch between scrollingElementRef.current and node without proper type validation. This could lead to runtime errors if node is not of the expected type that scrollingElementRef.current should accept. Consider adding type validation or using proper type assertions.
Suggested change
| // @ts-expect-error TODO | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| if (scrollingElementRef.current !== null) { | |
| scrollingElementRef.current = node; | |
| } |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
c8cd84c to
ce8808f
Compare
There was a problem hiding this comment.
Key Issues
Improper use of @ts-expect-error can lead to runtime errors due to unaddressed type issues in scrollingElementRef. Using any type for parameters bypasses TypeScript's type checking, risking type-related bugs; maintaining generic types ensures type safety.
Comment on lines
+95
to
97
| // @ts-expect-error TODO | ||
| // eslint-disable-next-line no-param-reassign | ||
| scrollingElementRef.current = node; |
There was a problem hiding this comment.
🐛 Possible Bug
Using @ts-expect-error without addressing the underlying type issue is dangerous. The scrollingElementRef might not have the expected structure, which could lead to runtime errors when accessing .current. Consider properly typing the ref or handling the case where the ref structure is different.
Suggested change
| // @ts-expect-error TODO | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| if (scrollingElementRef && 'current' in scrollingElementRef) { | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| } |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
ce8808f to
e4827a7
Compare
Comment on lines
+95
to
97
| // @ts-expect-error TODO | ||
| // eslint-disable-next-line no-param-reassign | ||
| scrollingElementRef.current = node; |
There was a problem hiding this comment.
🐛 Possible Bug
The @ts-expect-error suppression is masking a potential type mismatch when assigning to scrollingElementRef.current. This could lead to runtime errors if the ref object doesn't match the expected type. Instead, we should properly type the ref to ensure type safety.
Suggested change
| // @ts-expect-error TODO | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| scrollingElementRef.current = node as HTMLElement; |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
e4827a7 to
0ec4742
Compare
Comment on lines
+95
to
97
| // @ts-expect-error TODO | ||
| // eslint-disable-next-line no-param-reassign | ||
| scrollingElementRef.current = node; |
There was a problem hiding this comment.
🐛 Possible Bug
Using @ts-expect-error without proper validation or type checking could lead to runtime errors if scrollingElementRef is not a valid React ref object. The code assumes it has a current property but doesn't validate this assumption.
Suggested change
| // @ts-expect-error TODO | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| if (!scrollingElementRef || typeof scrollingElementRef !== 'object' || !('current' in scrollingElementRef)) { | |
| console.warn('Invalid scrollingElementRef provided to Modal'); | |
| return; | |
| } | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; |
DSil
force-pushed
the
sarka/react-upgrade-fix
branch
from
0ec4742 to
3a03910
Compare
DSil
approved these changes
May 8, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This Pull Request meets the following criteria:
For new components:
d.tsfiles and are exported inindex.d.ts✨
Description by Callstackai
This PR updates the type definitions for compatibility with React 18.3, modifies package dependencies, and refines the usage of refs in various components.
Diagrams of code changes
sequenceDiagram participant App participant Component participant useBoundingRect participant RefHandler App->>Component: Render with React 18 Note over Component: Updated React/ReactDOM to v18.3.0 Component->>useBoundingRect: Call hook with HTMLElement useBoundingRect-->>Component: Return [dimensions, RefObject] Component->>RefHandler: Pass ref to elements Note over RefHandler: Improved type safety for refs alt Component is Expandable Component->>Component: Render with explicit RefObject type Note over Component: Added proper ref typing<br/>for expandable sections endFiles Changed
This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.json. See list of supported languages.