feat!: useId の独自実装を削除し、React 18 未満のサポートを終了する (#4920)

packages/smarthr-ui/package.json

@@ -91,8 +91,8 @@
  "webpack": "^5.94.0"
  },
  "peerDependencies": {
- "react": "16.13.0 || ^17.0.1 || ^18.0.0",
- "react-dom": "16.13.0 || ^17.0.1 || ^18.0.0",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
  "styled-components": "^5.0.1"
  },
  "bugs": {

packages/smarthr-ui/src/hooks/useId.test.ts

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react'
+
+import { useId } from './useId'
+
+describe('useId', () => {
+ it('defaultId を指定した場合、毎回同じ値を返す', () => {
+ const { result: id1 } = renderHook(() => useId('test'))
+ const { result: id2 } = renderHook(() => useId('test'))
+ const { result: id3 } = renderHook(() => useId('test'))
+
+ expect(id1.current).toEqual('test')
+ expect(id2.current).toEqual('test')
+ expect(id3.current).toEqual('test')
+ })
+
+ it('defaultId を指定しない場合、異なる値を返す', () => {
+ const { result: id1 } = renderHook(() => useId())
+ const { result: id2 } = renderHook(() => useId())
+ const { result: id3 } = renderHook(() => useId())
+
+ expect(id1.current).not.toEqual(id2.current)
+ expect(id2.current).not.toEqual(id3.current)
+ expect(id3.current).not.toEqual(id1.current)
+ })
+})

packages/smarthr-ui/src/hooks/useId.tsx

@@ -1,35 +1,6 @@
-import React, { ReactNode, VFC, createContext, useContext, useMemo } from 'react'
-
-type IdContextValue = {
- prefix: number
- current: number
-}
-
-const defaultContext: IdContextValue = {
- prefix: 0,
- current: 0,
-}
-
-const IdContext = createContext<IdContextValue>(defaultContext)
-
-function useId_OLD() {
- const context = useContext(IdContext)
- return useMemo(() => `id-${context.prefix}-${++context.current}`, [context])
-}
+import React from 'react'
 
 export const useId = (defaultId?: string): string => {
- if (defaultId) return defaultId
-
- // React v18 以降は React.useId を使う
- return ('useId' in React ? React.useId : useId_OLD)()
-}
-
-export const SequencePrefixIdProvider: VFC<{ children: ReactNode }> = ({ children }) => {
- const context = useContext(IdContext)
- // increment `prefix` and reset `current` to 0 on every Provider
- const value: IdContextValue = {
- prefix: context.prefix + 1,
- current: 0,
- }
- return <IdContext.Provider value={value}>{children}</IdContext.Provider>
+ const id = React.useId()
+ return defaultId || id
 }

packages/smarthr-ui/src/index.ts

@@ -127,6 +127,3 @@ export { defaultBreakpoint } from './themes/createBreakpoint'
 
 // constants
 export { FONT_FAMILY, CHART_COLORS, OTHER_CHART_COLOR } from './constants'
-
-// utils
-export { SequencePrefixIdProvider } from './hooks/useId'