Add React 19 support

.changeset/tasty-mice-complain.md

@@ -0,0 +1,6 @@
+---
+"usehooks-ts": major
+"www": minor
+---
+
+Add React 19 support

apps/www/src/app/(docs)/migrate-to-v4/page.tsx

@@ -0,0 +1,27 @@
+import { PageHeader } from '@/components/docs/page-header'
+import { components } from '@/components/ui/components'
+
+export default async function MigrateToV4Page() {
+  return (
+    <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
+      <div className="mx-auto w-full min-w-0">
+        <PageHeader
+          id="migrate-to-v4"
+          className="scroll-m-20"
+          heading={'Migrate to v4'}
+        />
+        <components.p>
+          <components.code>usehooks-ts</components.code> bumped to version 4 and
+          it&apos;s a major release to support{' '}
+          <components.a
+            href="https://react.dev/blog/2024/12/05/react-19"
+            target="_blank"
+          >
+            React 19
+          </components.a>
+          . Just install v4 and you&apos;re good to go.
+        </components.p>
+      </div>
+    </main>
+  )
+}

apps/www/src/config/docs.ts

@@ -16,8 +16,8 @@ export const docsConfig: DocsConfig = {
           href: '/introduction',
         },
         {
-          title: 'Migrate to v3',
-          href: '/migrate-to-v3',
+          title: 'Migrate to v4',
+          href: '/migrate-to-v4',
         },
       ],
     },

packages/usehooks-ts/package.json

@@ -42,14 +42,14 @@
     "@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.8",
     "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",
+    "react-dom": "19.0.0",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3",
     "vitest": "^1.3.1"
   },
   "dependencies": {

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.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