From a1074540d2e36500d82f6e31dfb6ce73237e04af Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 25 Apr 2022 11:02:21 +0800
Subject: [PATCH] fix: render compile warning

---
 src/hooks/useId.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts
index 3f867622..6c34ec49 100644
--- a/src/hooks/useId.ts
+++ b/src/hooks/useId.ts
@@ -1,5 +1,14 @@
 import * as React from 'react';
 
+function getUseId() {
+  // We need fully clone React function here to avoid webpack warning React 17 do not export `useId`
+  const fullClone = {
+    ...React,
+  };
+
+  return fullClone.useId;
+}
+
 let uuid = 0;
 
 /** @private Note only worked in develop env. Not work in production. */
@@ -13,11 +22,11 @@ export default function useId(id?: string) {
   // Inner id for accessibility usage. Only work in client side
   const [innerId, setInnerId] = React.useState<string>('ssr-id');
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const reactNativeId = React.useId?.();
+  const useOriginId = getUseId();
+  const reactNativeId = useOriginId?.();
 
   React.useEffect(() => {
-    if (!React.useId) {
+    if (!useOriginId) {
       const nextId = uuid;
       uuid += 1;