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);