Blame · hooks.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import deepEqual from 'fast-deep-equal';
b69ab31	9	import {useCallback, useEffect, useMemo, useRef} from 'react';
b69ab31	10	import {debounce} from './debounce';
b69ab31	11
b69ab31	12	/**
b69ab31	13	* Like useEffect, but throttles calls to the effect callback.
b69ab31	14	* This can help avoid overfiring effects that need to happen during render.
b69ab31	15	*
b69ab31	16	* Note: Do not use this just to bypass effects firing twice
b69ab31	17	* in strict + dev mode. Double-firing is done to help detect bugs.
b69ab31	18	* Throttling is not suitable for subscriptions that must stay in sync
b69ab31	19	* or queries which need to stay in sync as things update.
b69ab31	20	*
b69ab31	21	* This is most useful for best-effort side-effects like logging & analytics
b69ab31	22	* which don't require exact synchronization and don't affect UI state.
b69ab31	23	*/
b69ab31	24	export function useThrottledEffect<A extends Array<unknown>>(
b69ab31	25	cb: (...args: A) => void,
b69ab31	26	throttleTimeMs: number,
b69ab31	27	deps?: Array<unknown>,
b69ab31	28	): void {
b69ab31	29	// eslint-disable-next-line react-hooks/exhaustive-deps
b69ab31	30	const throttled = useCallback(debounce(cb, throttleTimeMs, undefined, true), [
b69ab31	31	throttleTimeMs,
b69ab31	32	...(deps ?? []),
b69ab31	33	]);
b69ab31	34	return useEffect((...args: A) => {
b69ab31	35	return throttled(...args);
b69ab31	36	// eslint-disable-next-line react-hooks/exhaustive-deps
b69ab31	37	}, deps);
b69ab31	38	}
b69ab31	39
b69ab31	40	/**
b69ab31	41	* Like React.useMemo, but with deep equality comparison between previous/next dependencies.
b69ab31	42	*/
b69ab31	43	export function useDeepMemo<T>(construct: () => T, dependencies: React.DependencyList) {
b69ab31	44	const ref = useRef<React.DependencyList>([]);
b69ab31	45	if (!deepEqual(dependencies, ref.current)) {
b69ab31	46	ref.current = dependencies;
b69ab31	47	}
b69ab31	48	const deepDeps = ref.current;
b69ab31	49
b69ab31	50	// eslint-disable-next-line react-hooks/exhaustive-deps
b69ab31	51	return useMemo(construct, deepDeps);
b69ab31	52	}
b69ab31	53
b69ab31	54	/**
b69ab31	55	* Returns a react ref that you can pass to an element to autofocus it on mount.
b69ab31	56	*/
b69ab31	57	export function useAutofocusRef<T extends HTMLElement>(): React.MutableRefObject<T \| null> {
b69ab31	58	const ref = useRef<T \| null>(null);
b69ab31	59	useEffect(() => {
b69ab31	60	if (ref.current != null) {
b69ab31	61	ref.current.focus();
b69ab31	62	}
b69ab31	63	}, [ref]);
b69ab31	64	return ref;
b69ab31	65	}
b69ab31	66
b69ab31	67	/**
b69ab31	68	* Returns the last (different) value of a given variable from a previous render.
b69ab31	69	*/
b69ab31	70	export function usePrevious<T>(value: T, equalityFn?: (a: T, b: T) => boolean): T \| undefined {
b69ab31	71	const ref = useRef<{value: T; prev: T \| undefined}>({
b69ab31	72	value,
b69ab31	73	prev: undefined,
b69ab31	74	});
b69ab31	75
b69ab31	76	const current = ref.current.value;
b69ab31	77
b69ab31	78	if (equalityFn != null ? !equalityFn(value, current) : value !== current) {
b69ab31	79	ref.current = {
b69ab31	80	value,
b69ab31	81	prev: current,
b69ab31	82	};
b69ab31	83	}
b69ab31	84
b69ab31	85	return ref.current?.prev;
b69ab31	86	}