feat: Use React's `useId` hook if available

[connorlanigan]

Description

This updates our useUniqueId hook to use the native useId hook provided by React. If the native hook is not available, it falls back to our existing implementation.

The native useId hook has the advantage of generating IDs that are stable between server-rendering and client-side hydration, thus preventing hydration errors.

How has this been tested?

[How did you test to verify your changes?]

Upgraded the dev dependency on React and ReactDOM to 18, and inspected the dev pages. They use the new IDs provided by React.

[How can reviewers test these changes efficiently?] see above

[Check for unexpected visual regressions, see CONTRIBUTING.md for details.]

Documentation changes

[Do the changes include any API documentation changes?]

• [ ] Yes, this change contains documentation changes.
• [X] No.

Related Links

• AWSUI-9561

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• [X] Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• [X] Changes do not include unsupported browser features, see CONTRIBUTING.md.
• [ ] Changes were manually tested for accessibility, see accessibility guidelines.

Security

• [ ] If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• [ ] Changes are covered with new/existing unit tests?
• [ ] Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[just-boris]

How about moving condition outside the hook code

function useUniqueIdFallback(prefix = '') {
  // old code
}

function useUniqueIdModern(prefix = '') {
  return prefix + (React as ReactWithUseId).useId();
}

export const useIniqueId = (React as ReactWithUseId).useId !== undefined ? useUniqueIdModern : useUniqueIdFallback;

This way the React 18 code will not create unused ref

[codecov[bot]]

Codecov Report

Merging #233 (152e19a) into main (70f0227) will decrease coverage by 0.00%. The diff coverage is 83.33%.

@@            Coverage Diff             @@
##             main     #233      +/-   ##
==========================================
- Coverage   92.64%   92.63%   -0.01%     
==========================================
  Files         554      554              
  Lines       15688    15690       +2     
  Branches     4303     4305       +2     
==========================================
+ Hits        14534    14535       +1     
- Misses       1073     1074       +1     
  Partials       81       81              

Impacted Files	Coverage Δ
src/internal/hooks/use-unique-id/index.ts	90.90% <83.33%> (-9.10%)	:arrow_down:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[avinashbot]

I made this change a while ago, and while discussing it with some folks, the consensus was that we needed React 18 specific tests before we start catering to React 18-specific behavior, and we had two React 18 specific bugs around that time. So I'm not sure if I'm comfortable with this landing before we have React 18 specific tests.