Bugfix/#602 - Add support for React 19

.changeset/nervous-trees-talk.md

@@ -0,0 +1,7 @@
+---
+"eslint-config-custom": patch
+"usehooks-ts": patch
+"www": patch
+---
+
+Add React 19 support

.vscode/settings.json

@@ -74,5 +74,6 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
-  "files.associations": { "*.json": "jsonc" }
+  "files.associations": { "*.json": "jsonc" },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/www/package.json

@@ -13,26 +13,26 @@
     "generate-doc": "cd ../.. && pnpm generate-doc && cd -"
   },
   "dependencies": {
-    "@next/third-parties": "^14.1.0",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@t3-oss/env-nextjs": "^0.9.2",
+    "@next/third-parties": "^15.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@t3-oss/env-nextjs": "^0.11.1",
     "@types/voca": "^1.4.1",
     "algoliasearch": "^4.22.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.0.4",
     "date-fns": "^3.3.1",
     "gray-matter": "^4.0.3",
-    "lucide-react": "^0.364.0",
-    "next": "14.1.4",
-    "next-mdx-remote": "^4.4.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-instantsearch": "^7.6.0",
+    "lucide-react": "^0.469.0",
+    "next": "15.1.2",
+    "next-mdx-remote": "^5.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-instantsearch": "^7.13.9",
     "rehype-prism-plus": "^2.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "schema-dts": "^1.1.2",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.4.3",
@@ -45,13 +45,12 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "20.12.2",
-    "@types/react": "18.2.73",
-    "@types/react-dom": "18.2.23",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "autoprefixer": "10.4.19",
     "eslint-config-custom": "workspace:*",
     "eslint-config-next": "14.1.4",
     "next-sitemap": "^4.2.3",
-    "postcss": "8.4.38",
-    "typescript": "5.4.3"
+    "postcss": "8.4.38"
   }
 }

apps/www/src/app/(docs)/react-hook/[slug]/page.tsx

@@ -7,6 +7,8 @@ import { RightSidebar } from '@/components/docs/right-sidebar'
 import { siteConfig } from '@/config/site'
 import { getHook, getHookList } from '@/lib/api'
 
+type Params = Promise<{ slug: string }>
+
 export const generateStaticParams = async () => {
   const hooks = await getHookList()
   return hooks.map(hook => ({ slug: hook.slug }))
@@ -24,11 +26,14 @@ function getImageUrl(name: string) {
   return `https://via.placeholder.com/1200x630.png/007ACC/fff/?text=${name}`
 }
 
-export const generateMetadata = async (props: {
-  params: { slug: string }
+export const generateMetadata = async ({
+  params,
+}: {
+  params: Params
 }): Promise<Metadata> => {
+  const { slug } = await params
   const hooks = await getHookList()
-  const hook = hooks.find(hook => hook.slug === props.params.slug)
+  const hook = hooks.find(hook => hook.slug === slug)
   if (!hook) {
     return {}
   }
@@ -63,13 +68,10 @@ export const generateMetadata = async (props: {
   }
 }
 
-export default async function HookPage({
-  params,
-}: {
-  params: { slug: string }
-}) {
+export default async function HookPage({ params }: { params: Params }) {
+  const { slug } = await params
   const [{ frontmatter, content }, hookList] = await Promise.all([
-    getHook(params.slug),
+    getHook(slug),
     getHookList(),
   ])
 

apps/www/src/components/docs/table-of-content.tsx

@@ -107,7 +107,7 @@ function Tree({ tree, level = 1, activeItem }: TreeProps) {
               href={item.url}
               className={cn(
                 'inline-block no-underline',
-                item.url === `#${activeItem}`
+                item.url === `#${activeItem ?? ''}`
                   ? 'font-medium text-primary'
                   : 'text-sm text-muted-foreground',
               )}

apps/www/src/components/main-nav.tsx

@@ -28,7 +28,7 @@ export function MainNav({ items, children }: MainNavProps) {
           {siteConfig.name}
         </span>
       </Link>
-      {items?.length ? (
+      {items?.length && segment ? (
         <nav className="hidden gap-6 md:flex">
           {items?.map((item, index) => (
             <Link

apps/www/src/types/react-instantsearch.ts

@@ -0,0 +1,9 @@
+// TODO: remove after https://github.com/algolia/instantsearch/issues/6409 has been resolved
+
+import type { ReactNode } from 'react'
+import type { IndexProps, InstantSearchProps } from 'react-instantsearch'
+
+declare module 'react-instantsearch' {
+  export function InstantSearch(props: InstantSearchProps): ReactNode
+  export function Index(props: IndexProps): ReactNode
+}

package.json

@@ -28,9 +28,6 @@
     "changeset-publish": "npx changeset publish",
     "generate-doc": "zx ./scripts/generate-doc.js"
   },
-  "resolutions": {
-    "typescript": "^5.3.3"
-  },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@turbo/gen": "^1.12.4",
@@ -43,10 +40,11 @@
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "turbo": "^1.12.4",
-    "typedoc": "^0.25.9",
+    "typedoc": "^0.25.13",
     "typedoc-plugin-markdown": "^3.17.1",
     "typedoc-plugin-mdn-links": "^3.1.17",
     "typedoc-plugin-missing-exports": "^2.2.0",
+    "typescript": "5.4.3",
     "zod": "3.22.4",
     "zx": "^7.2.3"
   },

packages/eslint-config-custom/package.json

@@ -8,16 +8,15 @@
   "license": "MIT",
   "type": "module",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-vitest": "^0.4.0",
-    "typescript": "^5.3.3"
+    "eslint-plugin-vitest": "^0.4.0"
   }
 }

packages/usehooks-ts/package.json

@@ -42,21 +42,20 @@
     "@testing-library/react": "^14.2.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.11.19",
-    "@types/react": "18.2.73",
+    "@types/react": "19.0.2",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-jsdoc": "^48.1.0",
     "eslint-plugin-tree-shaking": "^1.12.1",
     "jsdom": "^24.0.0",
-    "react": "18.2.0",
+    "react": "19.0.0",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3",
     "vitest": "^1.3.1"
   },
   "dependencies": {
     "lodash.debounce": "^4.0.8"
   },
   "peerDependencies": {
-    "react": "^16.8.0  || ^17 || ^18"
+    "react": "^16.8.0  || ^17 || ^18 || ^19"
   },
   "engines": {
     "node": ">=16.15.0"

packages/usehooks-ts/src/useCopyToClipboard/useCopyToClipboard.demo.tsx

@@ -8,7 +8,7 @@ export default function Component() {
       .then(() => {
         console.log('Copied!', { text })
       })
-      .catch(error => {
+      .catch((error: unknown) => {
         console.error('Failed to copy!', error)
       })
   }

packages/usehooks-ts/src/useDebounceCallback/useDebounceCallback.ts

@@ -76,7 +76,9 @@ export function useDebounceCallback<T extends (...args: any) => ReturnType<T>>(
   delay = 500,
   options?: DebounceOptions,
 ): DebouncedState<T> {
-  const debouncedFunc = useRef<ReturnType<typeof debounce>>()
+  const debouncedFunc = useRef<ReturnType<typeof debounce> | undefined>(
+    undefined,
+  )
 
   useUnmount(() => {
     if (debouncedFunc.current) {

packages/usehooks-ts/src/useEventListener/useEventListener.ts

@@ -31,7 +31,7 @@ function useEventListener<
   handler:
     | ((event: HTMLElementEventMap[K]) => void)
     | ((event: SVGElementEventMap[K]) => void),
-  element: RefObject<T>,
+  element: RefObject<T | null>,
   options?: boolean | AddEventListenerOptions,
 ): void
 
@@ -88,7 +88,7 @@ function useEventListener<
       | MediaQueryListEventMap[KM]
       | Event,
   ) => void,
-  element?: RefObject<T>,
+  element?: RefObject<T | null>,
   options?: boolean | AddEventListenerOptions,
 ) {
   // Create a ref that stores handler

packages/usehooks-ts/src/useHover/useHover.ts

@@ -19,7 +19,7 @@ import { useEventListener } from '../useEventListener'
  * ```
  */
 export function useHover<T extends HTMLElement = HTMLElement>(
-  elementRef: RefObject<T>,
+  elementRef: RefObject<T | null>,
 ): boolean {
   const [value, setValue] = useState<boolean>(false)
 

packages/usehooks-ts/src/useIntersectionObserver/useIntersectionObserver.demo.tsx

@@ -28,7 +28,7 @@ export default function Component() {
   return (
     <>
       {Array.from({ length: 5 }).map((_, index) => (
-        <Section key={index + 1} title={`${index + 1}`} />
+        <Section key={index + 1} title={(index + 1).toFixed()} />
       ))}
     </>
   )

packages/usehooks-ts/src/useIntersectionObserver/useIntersectionObserver.ts

@@ -94,7 +94,8 @@ export function useIntersectionObserver({
     entry: undefined,
   }))
 
-  const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>()
+  const callbackRef =
+    useRef<UseIntersectionObserverOptions['onChange']>(undefined)
 
   callbackRef.current = onChange
 

packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts

@@ -30,7 +30,7 @@ type EventType =
  * ```
  */
 export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T> | RefObject<T>[],
+  ref: RefObject<T | null> | RefObject<T | null>[],
   handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
   eventType: EventType = 'mousedown',
   eventListenerOptions: AddEventListenerOptions = {},
@@ -41,7 +41,7 @@ export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
       const target = event.target as Node
 
       // Do nothing if the target is not connected element with document
-      if (!target || !target.isConnected) {
+      if (!target?.isConnected) {
         return
       }
 

packages/usehooks-ts/src/useResizeObserver/useResizeObserver.ts

@@ -15,7 +15,7 @@ type Size = {
 /** The options for the ResizeObserver. */
 type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
   /** The ref of the element to observe. */
-  ref: RefObject<T>
+  ref: RefObject<T | null>
   /**
    * When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback.
    * @default undefined

packages/usehooks-ts/src/useScrollLock/useScrollLock.test.ts

@@ -108,7 +108,9 @@ describe('useScrollLock()', () => {
 
     const scrollbarWidth = window.innerWidth - document.body.scrollWidth
 
-    expect(document.body.style.paddingRight).toBe(`${scrollbarWidth}px`)
+    expect(document.body.style.paddingRight).toBe(
+      `${scrollbarWidth.toFixed()}px`,
+    )
     unmount()
     expect(document.body.style.paddingRight).toBe('')
   })

packages/usehooks-ts/src/useScrollLock/useScrollLock.ts

@@ -90,7 +90,7 @@ export function useScrollLock(
           0
 
         const scrollbarWidth = offsetWidth - target.current.scrollWidth
-        target.current.style.paddingRight = `${scrollbarWidth + currentPaddingRight}px`
+        target.current.style.paddingRight = `${(scrollbarWidth + currentPaddingRight).toFixed()}px`
       }
 
       // Lock the scroll