misc-hooks

misc-hooks - Precious React hooks

Exported modules

• OptionalArray (type).
• nextState = nextStateFromAction(action, state): get next state from setState action.
• [state, toggle] = useToggle(init = false): toggle() to toggle boolean state state, or, toggle(true/false) to set state.
• [state, enable] = useTurnOn(): enable() to set state to true.
• [state, disable] = useTurnOff(): disable() to set state to false.
• unmountedRef = useUnmountedRef(): get a ref whose value is true when component is unmounted. Note, from react 18, the effect is sometimes unmounted and mounted again.
• mountedRef = useMountedRef(): get a ref whose value is true when component is mounted. Note: ref's value is not set to false when component is unmounted.
• mounted = useMounted(): get a boolean whose value is true when component is mounted. Note: the value is not set to false when component is unmounted.
• timedout = useTimedOut(timeout): get a boolean whose value is true after timeout ms.
• state = useDebounce(value, timeout): get a debounced value. state is updated after at least timeout ms.
• memoValue = useDeepMemo(value): get a memoized value. value is compared by deep-equal package.
• update = useForceUpdate(): get a function to force re-render component.
• prefRef = usePrevRef(value): get a ref whose value is the previous value.
• [state, setState] = useDefaultState(defaultState): when defaultState changes, set state to defaultState. Note: we currently rely on deps array to trigger the effect. Need to check if react never fires the effect when the deps array is the same.
• useEffectWithPrevDeps((prevDeps) => {}, [...deps]): similar to useEffect, but also provides previous deps to the effect function.
• useEffectOnce(() => {}, [...deps]): similar to useEffect, but fires only once.
• useLayoutEffectWithPrevDeps((prevDeps) => {}, [...deps]): useLayoutEffect version of useEffectWithPrevDeps.
• [state, setState, stateRef] = useEnhancedState(initialState): similar to useState, but also returns a ref whose value is always the latest state.
• [state, setState, stateRef] = useRefState(initialState): similar to useState. stateRef's value is set immediately and synchronously after setState is called. Note: initialState can not be a function.
• [loading, makeAtomic] = useAtomicMaker(): get a function to make a function atomic by calling await makeAtomic(cb)(...params). loading is true when the atomic function is running. If another atomic function is called when the previous one is running, the new one returns undefined.
• [loading, atomicCb] = useAtomicCallback(cb): similar to useAtomicMaker with atomicCb = makeAtomic(cb).
• ref = useRefValue(value): similar to useEffectEvent, get a ref whose value is always the latest value.
• [state, setState] = useAnimationState(elmRef, initialValue): delay state change if animation/transition (on element whose ref is elmRef) is running (i.e., only update state after the animation ends). Note: ref.current should be defined as soon as possible (for e.g., from the first effect call). Otherwise, it will not possible to listen to animation/transition events. Note: if the animation fires before the effect is called which usually happens (and even before any javascript runs), animationstart/transitionstart is not caught which causes the state to be updated immediately if setState() is called.
• useConfirmDiscard(msg): show confirm dialog when user tries to reload the page. msg is the message to show. If msg is falsy, the confirm dialog is disabled.
• useIsoLayoutEffect: it is ridiculous that react does not allow to call useLayoutEffect in SSR (tested with react <= v17). This hook switches to useLayoutEffect in browser and useEffect in SSR.
• [width, height] = useWindowSize(): get window size, listen to resize event of window. In SSR, width and height are undefined. Note: be careful when handling hydration mismatch.
• {value, setValue} = usePropState(initialState): similar to useState, but the returned value is an object, not an array.
• scopeId = useScopeId(prefix?: string): get a function to generate scoped id. prefix is the prefix of the id. The id is generated by scopeId(name?: string) = prefix + id + name. id is a SSR-statically random number generated by useId().
• update = useUpdate(getValue): get a function to force re-render component. getValue is a function to get the latest value to compare with the previous value. The latest passed getValue is always used (useReducer specs).
• lastDefinedValue = useKeep(value): keep the last defined value. If value is undefined, the last defined value is returned.
• useListData(): utility to load list data. Usage:

	const {list, hasPrev, hasNext, loadPrev, loadNext} = useListData({
	initial: {
		list, // default list
		hasNext, // default hasNext
		hasPrev, // default hasPrev
	},
	async load({before, after}) { // function to load data
		return {
			records, // new records
			hasMore, // whether there are more records
		}
	}
})

When calling loadNext, loadPrev, if there is an existing running, the new call will not be executed and does nothing.