feat: add typing support for react 19 (#1627)

Change adapts to types changes of React19. Otherwise no changes done.
Deprecated `MutableRefObject` remained to ensure backwards
compatibility.

Author: xobotyi

eslint.config.js

@@ -15,6 +15,12 @@ const config = [
 	...mdConfig,
 	...typescriptConfig,
 	...vitestConfig,
+	{
+		files: ['**/*.ts'],
+		rules: {
+			'@typescript-eslint/no-deprecated': 'off',
+		},
+	},
 ];
 
 export default config;

package.json

@@ -49,8 +49,8 @@
 	},
 	"peerDependencies": {
 		"js-cookie": "^3.0.5",
-		"react": "^16.8 || ^17 || ^18",
-		"react-dom": "^16.8 || ^17 || ^18"
+		"react": "^16.8 || ^17 || ^18 || ^19",
+		"react-dom": "^16.8 || ^17 || ^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"js-cookie": {
@@ -64,8 +64,8 @@
 		"@react-hookz/eslint-formatter-gha": "^3.0.4",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/js-cookie": "^3.0.6",
-		"@types/react": "^17.0.83",
-		"@types/react-dom": "^17.0.26",
+		"@types/react": "^19.0.10",
+		"@types/react-dom": "^19.0.4",
 		"@vitest/coverage-v8": "^3.0.8",
 		"commitlint": "^19.7.1",
 		"eslint": "^9.21.0",

src/useAsync/index.ts

@@ -72,8 +72,8 @@ export function useAsync<Result, Args extends unknown[] = unknown[]>(
 		error: undefined,
 		result: initialValue,
 	});
-	const promiseRef = useRef<Promise<Result>>();
-	const argsRef = useRef<Args>();
+	const promiseRef = useRef<Promise<Result>>(undefined);
+	const argsRef = useRef<Args>(undefined);
 
 	const methods = useSyncedRef({
 		execute(...params: Args) {

src/useAsyncAbortable/index.ts

@@ -59,7 +59,7 @@ export function useAsyncAbortable<Result, Args extends unknown[] = unknown[]>(
 		UseAsyncAbortableActions<Result, Args>,
 		UseAsyncAbortableMeta<Result, Args>,
 	] {
-	const abortController = useRef<AbortController>();
+	const abortController = useRef<AbortController>(undefined);
 
 	const fn = async (...args: Args): Promise<Result> => {
 		// Abort previous async

src/useClickOutside/index.ts

@@ -13,7 +13,7 @@ const DEFAULT_EVENTS = ['mousedown', 'touchstart'];
  * 'mousedown', 'touchstart'
  */
 export function useClickOutside<T extends HTMLElement>(
-	ref: RefObject<T> | MutableRefObject<T>,
+	ref: RefObject<T | null> | MutableRefObject<T | null>,
 	callback: EventListener,
 	events: string[] = DEFAULT_EVENTS,
 ): void {

src/useCustomCompareEffect/index.ts

@@ -29,7 +29,7 @@ export function useCustomCompareEffect<
 	effectHook: EffectHook<Callback, Deps, HookRestArgs> = useEffect,
 	...effectHookRestArgs: R
 ): void {
-	const dependencies = useRef<Deps>();
+	const dependencies = useRef<Deps>(undefined);
 
 	// Effects are not run during SSR, therefore, it makes no sense to invoke the comparator
 	if (

src/useCustomCompareMemo/index.ts

@@ -14,7 +14,7 @@ export const useCustomCompareMemo = <T, Deps extends DependencyList>(
 	deps: Deps,
 	comparator: DependenciesComparator<Deps>,
 ): T => {
-	const dependencies = useRef<Deps>();
+	const dependencies = useRef<Deps>(undefined);
 
 	if (dependencies.current === undefined || !comparator(dependencies.current, deps)) {
 		dependencies.current = deps;

src/useDebouncedCallback/index.ts

@@ -22,10 +22,10 @@ export function useDebouncedCallback<Fn extends (...args: any[]) => any>(
 	delay: number,
 	maxWait = 0,
 ): DebouncedFunction<Fn> {
-	const timeout = useRef<ReturnType<typeof setTimeout>>();
-	const waitTimeout = useRef<ReturnType<typeof setTimeout>>();
+	const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+	const waitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
 	const cb = useRef(callback);
-	const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>();
+	const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>(undefined);
 
 	const clear = () => {
 		if (timeout.current) {
@@ -83,6 +83,6 @@ export function useDebouncedCallback<Fn extends (...args: any[]) => any>(
 		});
 
 		return wrapped;
-		// eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [delay, maxWait, ...deps]);
 }

src/useEventListener/index.ts

@@ -11,7 +11,7 @@ import {hasOwnProperty, off, on} from '../util/misc.js';
  * something like `[eventName, listener, options]`.
  */
 export function useEventListener<T extends EventTarget>(
-	target: RefObject<T> | T | null,
+	target: RefObject<T | null> | T | null,
 	...params:
 		| Parameters<T['addEventListener']>
 		| [string, EventListenerOrEventListenerObject | ((...args: any[]) => any), ...any]
@@ -60,6 +60,6 @@ export function useEventListener<T extends EventTarget>(
 	}, [target, params[0]]);
 }
 
-function isRefObject<T>(target: RefObject<T> | T | null): target is RefObject<T> {
+function isRefObject<T>(target: RefObject<T | null> | T | null): target is RefObject<T | null> {
 	return target !== null && typeof target === 'object' && hasOwnProperty(target, 'current');
 }

src/useHookableRef/index.ts

@@ -8,7 +8,7 @@ export function useHookableRef<T>(
 	onSet?: HookableRefHandler<T>,
 	onGet?: HookableRefHandler<T>
 ): MutableRefObject<T>;
-export function useHookableRef<T = undefined>(): MutableRefObject<T | undefined>;
+export function useHookableRef<T = undefined>(): MutableRefObject<T | null | undefined>;
 
 /**
  * Like `React.useRef` but it is possible to define get and set handlers.
@@ -23,7 +23,7 @@ export function useHookableRef<T>(
 	initialValue?: T,
 	onSet?: HookableRefHandler<T>,
 	onGet?: HookableRefHandler<T>,
-): MutableRefObject<T | undefined> {
+): MutableRefObject<T | null | undefined> {
 	const onSetRef = useSyncedRef(onSet);
 	const onGetRef = useSyncedRef(onGet);
 

src/useIntersectionObserver/index.ts

@@ -103,7 +103,7 @@ export type UseIntersectionObserverOptions = {
 	 * considered the viewport. Any part of the target not visible in the visible
 	 * area of the root is not considered visible.
 	 */
-	root?: RefObject<Element | Document> | Element | Document | null;
+	root?: RefObject<Element | Document | null> | Element | Document | null;
 	/**
 	 * A string which specifies a set of offsets to add to the root's bounding_box
 	 * when calculating intersections, effectively shrinking or growing the root
@@ -130,7 +130,7 @@ export type UseIntersectionObserverOptions = {
  * react reference
  */
 export function useIntersectionObserver<T extends Element>(
-	target: RefObject<T> | T | null,
+	target: RefObject<T | null> | T | null,
 	{
 		threshold = DEFAULT_THRESHOLD,
 		root: r,

src/useKeyboardEvent/index.ts

@@ -18,7 +18,7 @@ export type UseKeyboardEventOptions<T extends EventTarget> = {
 	 * Target element that emits `event`.
 	 * @default window
 	 */
-	target?: RefObject<T> | T | null;
+	target?: RefObject<T | null> | T | null;
 	/**
 	 * Options passed to the underlying `useEventListener` hook.
 	 */

src/useLifecycleLogger/index.ts

@@ -11,15 +11,13 @@ export function useLifecycleLogger(componentName: string, deps?: DependencyList)
 
 	useEffect(() => {
 		if (mountedRef.current) {
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 			console.log(`${componentName} updated`, deps && [...deps]);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps);
 
 	useEffect(() => {
 		mountedRef.current = true;
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		console.log(`${componentName} mounted`, deps && [...deps]);
 
 		return () => {

src/useMap/index.ts

@@ -12,7 +12,7 @@ const proto = Map.prototype;
 export function useMap<K = any, V = any>(
 	entries?: ReadonlyArray<readonly [K, V]> | null,
 ): Map<K, V> {
-	const mapRef = useRef<Map<K, V>>();
+	const mapRef = useRef<Map<K, V>>(undefined);
 	const rerender = useRerender();
 
 	if (!mapRef.current) {

src/useMediaQuery/index.ts

@@ -52,7 +52,6 @@ const queryUnsubscribe = (query: string, setState: QueryStateSetter): void => {
 			if (mql.removeEventListener) {
 				mql.removeEventListener('change', listener);
 			} else {
-				// eslint-disable-next-line @typescript-eslint/no-deprecated
 				mql.removeListener(listener);
 			}
 		}

src/usePrevious/index.ts

@@ -8,7 +8,7 @@ import {useEffect, useRef} from 'react';
  * @param value Value to yield on next render
  */
 export function usePrevious<T>(value?: T): T | undefined {
-	const previous = useRef<T>();
+	const previous = useRef<T>(undefined);
 
 	useEffect(() => {
 		previous.current = value;

src/useResizeObserver/index.ts

@@ -83,7 +83,7 @@ function getResizeObserver(): ResizeObserverSingleton | undefined {
  * @param enabled Whether resize observer is enabled or not.
  */
 export function useResizeObserver<T extends Element>(
-	target: RefObject<T> | T | null,
+	target: RefObject<T | null> | T | null,
 	callback: UseResizeObserverCallback,
 	enabled = true,
 ): void {

src/useSet/index.ts

@@ -10,7 +10,7 @@ const proto = Set.prototype;
  */
 
 export function useSet<T = any>(values?: readonly T[] | null): Set<T> {
-	const setRef = useRef<Set<T>>();
+	const setRef = useRef<Set<T>>(undefined);
 	const rerender = useRerender();
 
 	if (!setRef.current) {

src/useThrottledCallback/index.ts

@@ -22,8 +22,8 @@ export function useThrottledCallback<Fn extends (...args: any[]) => any>(
 	delay: number,
 	noTrailing = false,
 ): ThrottledFunction<Fn> {
-	const timeout = useRef<ReturnType<typeof setTimeout>>();
-	const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>();
+	const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+	const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>(undefined);
 
 	useUnmountEffect(() => {
 		if (timeout.current) {
@@ -68,6 +68,6 @@ export function useThrottledCallback<Fn extends (...args: any[]) => any>(
 		});
 
 		return wrapped;
-		// eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [delay, noTrailing, ...deps]);
 }

yarn.lock

@@ -1283,8 +1283,8 @@ __metadata:
     "@react-hookz/eslint-formatter-gha": "npm:^3.0.4"
     "@testing-library/react-hooks": "npm:^8.0.1"
     "@types/js-cookie": "npm:^3.0.6"
-    "@types/react": "npm:^17.0.83"
-    "@types/react-dom": "npm:^17.0.26"
+    "@types/react": "npm:^19.0.10"
+    "@types/react-dom": "npm:^19.0.4"
     "@vitest/coverage-v8": "npm:^3.0.8"
     commitlint: "npm:^19.7.1"
     eslint: "npm:^9.21.0"
@@ -1301,8 +1301,8 @@ __metadata:
     vitest: "npm:^3.0.8"
   peerDependencies:
     js-cookie: ^3.0.5
-    react: ^16.8 || ^17 || ^18
-    react-dom: ^16.8 || ^17 || ^18
+    react: ^16.8 || ^17 || ^18 || ^19
+    react-dom: ^16.8 || ^17 || ^18 || ^19
   peerDependenciesMeta:
     js-cookie:
       optional: true
@@ -1813,37 +1813,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.14
-  resolution: "@types/prop-types@npm:15.7.14"
-  checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:^17.0.26":
-  version: 17.0.26
-  resolution: "@types/react-dom@npm:17.0.26"
+"@types/react-dom@npm:^19.0.4":
+  version: 19.0.4
+  resolution: "@types/react-dom@npm:19.0.4"
   peerDependencies:
-    "@types/react": ^17.0.0
-  checksum: 10c0/8363921f08afe3f2ef82fe293301a0809ec646975fe9f5bfeb2e823f7237b97e47d27e1c6c2ffff27d15c12ab3cad1de6c77a737e37499fcc52793b0fd674f3f
+    "@types/react": ^19.0.0
+  checksum: 10c0/4e71853919b94df9e746a4bd73f8180e9ae13016333ce9c543dcba9f4f4c8fe6e28b038ca6ee61c24e291af8e03ca3bc5ded17c46dee938fcb32d71186fda7a3
   languageName: node
   linkType: hard
 
-"@types/react@npm:^17.0.83":
-  version: 17.0.83
-  resolution: "@types/react@npm:17.0.83"
+"@types/react@npm:^19.0.10":
+  version: 19.0.10
+  resolution: "@types/react@npm:19.0.10"
   dependencies:
-    "@types/prop-types": "npm:*"
-    "@types/scheduler": "npm:^0.16"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/c8f76790190a9df42099f5f78d08dd4095f2da3bd97ff7cce0001d5a97ff3ffb31f703575acf2c457606e0d0b229ca8d1ba0ff459b77a4e44c5ea5154fe3fb4b
-  languageName: node
-  linkType: hard
-
-"@types/scheduler@npm:^0.16":
-  version: 0.16.8
-  resolution: "@types/scheduler@npm:0.16.8"
-  checksum: 10c0/f86de504945b8fc41b1f391f847444d542e2e4067cf7e5d9bfeb5d2d2393d3203b1161bc0ef3b1e104d828dabfb60baf06e8d2c27e27ff7e8258e6e618d8c4ec
+  checksum: 10c0/41884cca21850c8b2d6578b172ca0ca4fff6021251a68532b19f2031ac23dc5a9222470208065f8d9985d367376047df2f49ece8d927f7d04cdc94922b1eb34b
   languageName: node
   linkType: hard