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.
• {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
		}
	}
})

• makeAtom(), useAtom(): atom value. Usage:

	atom = makeAtom() // make atom
	atom = makeAtom(initialValue) // make atom with initial value
	useAtom(atom) // use atom in component
	atom.value = newValue // set value
	value = atom.value // get value
	unsub = atom.sub(val => console.log(val)) // subscribe
	unsub() // unsubscribe