feat: upgrade to react 19

- Use `useSyncExternalStore` in hooks - Remove `useId` - Remove `useNativeLazyLoading` BREAKING CHANGE
charlie-tango · Jul 5, 2024 · 46f8fe5 · 46f8fe5
1 parent 41fc8eb
commit 46f8fe5
Show file tree

Hide file tree

Showing 41 changed files with 113 additions and 1,008 deletions.
diff --git a/README.md b/README.md
@@ -35,11 +35,9 @@ All of our Hooks are published into their own NPM module, so you can pick and ch
 - **[@charlietango/use-client-hydrated](https://www.npmjs.com/package/@charlietango/use-client-hydrated)** _([useClientHydrated](packages/useClientHydrated/src))_ - Check if the client has been hydrated
 - **[@charlietango/use-element-size](https://www.npmjs.com/package/@charlietango/use-element-size)** _([useElementSize](packages/useElementSize/src))_ - Measure the size of a DOM element using ResizeObserver
 - **[@charlietango/use-focus-trap](https://www.npmjs.com/package/@charlietango/use-focus-trap)** _([useFocusTrap](packages/useFocusTrap/src))_ - Trap keyboard focus inside a DOM element, to prevent the user navigating outside a modal
-- **[@charlietango/use-id](https://www.npmjs.com/package/@charlietango/use-id)** _([useId](packages/useId/src))_ - Generate a deterministic id using a Context Provider
 - **[@charlietango/use-interaction](https://www.npmjs.com/package/@charlietango/use-interaction)** _([useInteraction](packages/useInteraction/src))_ - Monitor the user interactions on an element
 - **[@charlietango/use-lazy-ref](https://www.npmjs.com/package/@charlietango/use-lazy-ref)** _([useLazyRef](packages/useLazyRef/src))_ - Create a new ref with lazy instantiated value
 - **[@charlietango/use-media](https://www.npmjs.com/package/@charlietango/use-media)** _([useMedia](packages/useMedia/src))_ - Detect if the browser matches a media query
-- **[@charlietango/use-native-lazy-loading](https://www.npmjs.com/package/@charlietango/use-native-lazy-loading)** _([useNativeLazyLoading](packages/useNativeLazyLoading/src))_ - Detect if the browser supports the new 'loading' attribute on Image elements.
 - **[@charlietango/use-script](https://www.npmjs.com/package/@charlietango/use-script)** _([useScript](packages/useScript/src))_ - Load an external third party script
 - **[@charlietango/use-toggle](https://www.npmjs.com/package/@charlietango/use-toggle)** _([useToggle](packages/useToggle/src))_ - Simple boolean state toggler
 - **[@charlietango/use-window-size](https://www.npmjs.com/package/@charlietango/use-window-size)** _([useWindowSize](packages/useWindowSize/src))_ - Get the width and height of the viewport

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -49,8 +49,8 @@
     "@charlietango/use-window-size": "^1.7.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || '^19.0.0"
   },
   "gitHead": "9fabdd1c8d4d373df00340e9f0524ca18f34817e"
 }
diff --git a/packages/hooks/readme.md b/packages/hooks/readme.md
@@ -35,11 +35,9 @@ All of our Hooks are published into their own NPM module, so you can pick and ch
 - **[@charlietango/use-client-hydrated](https://www.npmjs.com/package/@charlietango/use-client-hydrated)** _([useClientHydrated](packages/useClientHydrated/src))_ - Check if the client has been hydrated
 - **[@charlietango/use-element-size](https://www.npmjs.com/package/@charlietango/use-element-size)** _([useElementSize](packages/useElementSize/src))_ - Measure the size of a DOM element using ResizeObserver
 - **[@charlietango/use-focus-trap](https://www.npmjs.com/package/@charlietango/use-focus-trap)** _([useFocusTrap](packages/useFocusTrap/src))_ - Trap keyboard focus inside a DOM element, to prevent the user navigating outside a modal
-- **[@charlietango/use-id](https://www.npmjs.com/package/@charlietango/use-id)** _([useId](packages/useId/src))_ - Generate a deterministic id using a Context Provider
 - **[@charlietango/use-interaction](https://www.npmjs.com/package/@charlietango/use-interaction)** _([useInteraction](packages/useInteraction/src))_ - Monitor the user interactions on an element
 - **[@charlietango/use-lazy-ref](https://www.npmjs.com/package/@charlietango/use-lazy-ref)** _([useLazyRef](packages/useLazyRef/src))_ - Create a new ref with lazy instantiated value
 - **[@charlietango/use-media](https://www.npmjs.com/package/@charlietango/use-media)** _([useMedia](packages/useMedia/src))_ - Detect if the browser matches a media query
-- **[@charlietango/use-native-lazy-loading](https://www.npmjs.com/package/@charlietango/use-native-lazy-loading)** _([useNativeLazyLoading](packages/useNativeLazyLoading/src))_ - Detect if the browser supports the new 'loading' attribute on Image elements.
 - **[@charlietango/use-script](https://www.npmjs.com/package/@charlietango/use-script)** _([useScript](packages/useScript/src))_ - Load an external third party script
 - **[@charlietango/use-toggle](https://www.npmjs.com/package/@charlietango/use-toggle)** _([useToggle](packages/useToggle/src))_ - Simple boolean state toggler
 - **[@charlietango/use-window-size](https://www.npmjs.com/package/@charlietango/use-window-size)** _([useWindowSize](packages/useWindowSize/src))_ - Get the width and height of the viewport

diff --git a/packages/hooks/src/hooks.ts b/packages/hooks/src/hooks.ts
@@ -4,8 +4,6 @@ export { default as useMedia } from '@charlietango/use-media'
 export { default as useScript } from '@charlietango/use-script'
 export { default as useToggle } from '@charlietango/use-toggle'
 export { default as useWindowSize } from '@charlietango/use-window-size'
-export { default as useId } from '@charlietango/use-id'
-export { default as useNativeLazyLoading } from '@charlietango/use-native-lazy-loading'
 export { default as useInteraction } from '@charlietango/use-interaction'
 export { default as useClientHydrated } from '@charlietango/use-client-hydrated'
 export { default as useLazyRef } from '@charlietango/use-lazy-ref'
diff --git a/packages/useClientHydrated/package.json b/packages/useClientHydrated/package.json
@@ -35,7 +35,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }
diff --git a/packages/useClientHydrated/src/useClientHydrated.test.js b/packages/useClientHydrated/src/useClientHydrated.test.js
@@ -1,9 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks'
 import useClientHydrated from './useClientHydrated'
 
-it('should update hydrated state after first render', () => {
-  let hookOutput = renderHook(() => useClientHydrated())
-  expect(hookOutput.result.current).toBe(false)
-  hookOutput = renderHook(() => useClientHydrated())
+it('should be hydrated on client', () => {
+  const hookOutput = renderHook(() => useClientHydrated())
   expect(hookOutput.result.current).toBe(true)
 })
diff --git a/packages/useClientHydrated/src/useClientHydrated.ts b/packages/useClientHydrated/src/useClientHydrated.ts
@@ -1,17 +1,21 @@
-import { useEffect } from 'react'
-let clientHydrated = false
+import { useSyncExternalStore } from 'react'
+
+// Void subscription function. You can't go back after hydrating.
+const subscribe = () => {
+  return () => {}
+};
+
+const getSnapshot = () => true
+
+const getServerSnapshot = () => false;
 
 /**
  * Returns false when serverside rendering and during the first render pass (hydration) in the client.
  * Use this to modify behavior of components when they can be certain they are running client side.
  * Like check a media query during the initial render.
  * */
 function useClientHydrated() {
-  useEffect(() => {
-    if (!clientHydrated) clientHydrated = true
-  }, [])
-
-  return clientHydrated
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
 
 export default useClientHydrated
diff --git a/packages/useElementSize/package.json b/packages/useElementSize/package.json
@@ -35,8 +35,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "resize-observer-polyfill": "^1.5.1"

diff --git a/packages/useFocusTrap/package.json b/packages/useFocusTrap/package.json
@@ -35,7 +35,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }
diff --git a/packages/useId/.eslintignore b/packages/useId/.eslintignore
diff --git a/packages/useId/.npmignore b/packages/useId/.npmignore
diff --git a/packages/useId/CHANGELOG.md b/packages/useId/CHANGELOG.md
diff --git a/packages/useId/LICENSE b/packages/useId/LICENSE
diff --git a/packages/useId/package.json b/packages/useId/package.json
diff --git a/packages/useId/readme.md b/packages/useId/readme.md