chore: restrict usages of React.useId (#2473)

Author: amje

eslint.config.mjs

@@ -34,6 +34,10 @@ export default defineConfig([
                     selector: "ImportDeclaration[source.value='@testing-library/react']",
                     message: "Please use wrapper from 'test-utils/utils.tsx'.",
                 },
+                {
+                    selector: "MemberExpression[object.name='React'][property.name='useId']",
+                    message: "Please use 'src/hooks/useUniqId' instead.",
+                },
             ],
             'jsx-a11y/no-autofocus': 'off',
             'import/no-extraneous-dependencies': 'off',

src/hooks/useUniqId/useUniqId.ts

@@ -16,8 +16,10 @@ function useUniqIdFallback() {
 }
 
 function useIdNative() {
+    // eslint-disable-next-line no-restricted-syntax
     return `${NAMESPACE}${React.useId()}`;
 }
 
 export const useUniqId: () => UseUniqIdResult =
+    // eslint-disable-next-line no-restricted-syntax
     typeof React.useId === 'function' ? useIdNative : useUniqIdFallback;