feat(use-id): react에 내장된 useId 훅을 사용하도록 구현 변경

Author: sungik-choi

src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap

@@ -206,8 +206,8 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             class="c2 c3"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-1"
-            id="field-1-label"
+            for="field-:r3:"
+            id="field-:r3:-label"
           >
             First Inner Label
           </label>
@@ -220,7 +220,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
           <input
             autocomplete="off"
             class="c6"
-            id="field-1"
+            id="field-:r3:"
             size="36"
             value=""
           />
@@ -237,8 +237,8 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             class="c2 c3"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-2"
-            id="field-2-label"
+            for="field-:r4:"
+            id="field-:r4:-label"
           >
             Second Inner Label
           </label>
@@ -252,7 +252,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             aria-invalid="true"
             autocomplete="off"
             class="c6"
-            id="field-2"
+            id="field-:r4:"
             size="36"
             value=""
           />
@@ -532,8 +532,8 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             class="c7 c4"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-3"
-            id="field-3-label"
+            for="field-:r6:"
+            id="field-:r6:-label"
           >
             First Inner Label
           </label>
@@ -546,7 +546,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
           <input
             autocomplete="off"
             class="c9"
-            id="field-3"
+            id="field-:r6:"
             size="36"
             value=""
           />
@@ -563,8 +563,8 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             class="c7 c4"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-4"
-            id="field-4-label"
+            for="field-:r7:"
+            id="field-:r7:-label"
           >
             Second Inner Label
           </label>
@@ -578,7 +578,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             aria-invalid="true"
             autocomplete="off"
             class="c9"
-            id="field-4"
+            id="field-:r7:"
             size="36"
             value=""
           />

src/hooks/useId.test.ts

@@ -6,13 +6,13 @@ describe('useId >', () => {
   it('should return unique id', () => {
     const { result } = renderHook(() => useId())
 
-    expect(result.current).toBe('1')
+    expect(result.current).toBe(':r0:')
   })
 
   it('should return unique id with 1 added on the next call', () => {
     const { result } = renderHook(() => useId())
 
-    expect(result.current).toBe('2')
+    expect(result.current).toBe(':r1:')
   })
 
   it('should return id prop when given id prop', () => {
@@ -24,6 +24,6 @@ describe('useId >', () => {
   it('should return unique id with a prefix when given prefix prop', () => {
     const { result } = renderHook(() => useId(undefined, 'prefix'))
 
-    expect(result.current).toBe('prefix-3')
+    expect(result.current).toBe('prefix-:r3:')
   })
 })

src/hooks/useId.ts

@@ -1,23 +1,9 @@
-/* @see https://github.com/chakra-ui/chakra-ui/blob/fa474bea3dcbdd4bbf2a26925f938d6e75a50c6d/packages/hooks/src/use-id.ts */
 /* External dependencies */
-import { useState, useEffect, useMemo } from 'react'
+import { useId as useIdentifier, useMemo } from 'react'
 import { compact } from 'lodash-es'
 
-const idRef = Object.seal({ current: 1 })
-
-const generateId = () => {
-  const id = idRef.current
-  idRef.current += 1
-  return id
-}
-
 function useId(idProp?: string, prefix?: string) {
-  const [id, setId] = useState(idRef.current)
-
-  useEffect(() => {
-    if (idProp) { return }
-    setId(generateId())
-  }, [idProp])
+  const id = useIdentifier()
 
   return useMemo(() => (
     idProp || compact([prefix, id]).join('-')