-
Notifications
You must be signed in to change notification settings - Fork 365
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
refactor: [M3-6708] β Implement new React 18 hooks #10261
refactor: [M3-6708] β Implement new React 18 hooks #10261
Conversation
- When conditionally rendering JSX, use ternaries instead of `&&`. | ||
- Example: `condition ? <Component /> : null` instead of `condition && <Component />` | ||
- This is to avoid hard-to-catch bugs ([read more](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx)). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We moved away from this convention about a year ago, but this was lingering in our Coding Standards.
- When conditionally rendering JSX, use ternaries instead of `&&`. | ||
- Example: `condition ? <Component /> : null` instead of `condition && <Component />` | ||
- This is to avoid hard-to-catch bugs ([read more](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx)). | ||
[Several new hooks were introduced with the release of React 18](https://react.dev/blog/2022/03/29/react-v18#new-hooks). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If/when other newly-introduced hooks get used in the code base, perhaps guidelines/explanations around their usage could be included in this section also.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This makes sense, and achieves the intended result - β
thanks for updating the documentation!
Description π
With our recent upgrade to React 18, we can begin making use of new hooks that were introduced with that version. This PR implements
useId()
in a few files.useTransition
mostly superfluous to us.componentDidMount
andcomponentWillUnmount
, so it may have some applicability when converting class components to function components.Changes π
useId()
inGroupByTagToggle.tsx
,LinodeConfigDialog.tsx
,DisplayGroupedLinodes.tsx
,DisplayLinodes.tsx
, andSortableTableHead.tsx
How to test π§ͺ
Verification steps
With VoiceOver on, ensure there have been no regressions/changes compared to prod for the following:
Alternatively or in addition to the above, you can verify by looking at the HTML and confirming that the
id
andaria-describedby
attributes on the related elements match up:As an Author I have considered π€