@takeout/hooks

collection of reusable react hooks for the takeout project.

hooks

useClickOutside

detect clicks outside a referenced element (web only)

useClickOutside({ ref, active, onClickOutside })

useDebouncePrepend

debounce list updates when prepending items, immediate updates otherwise

const debouncedList = useDebouncePrepend(list, delay)

useDeepMemoizedObject

deep memoization with optional immutable field tracking

const memoized = useDeepMemoizedObject(value, {
  immutableToNestedChanges: { 'path.to.field': true },
})

useDeferredBoolean

defer boolean state updates using react transitions

const deferredValue = useDeferredBoolean(value)

useEffectOnceGlobally

run effect once globally across all component instances, keyed by id

useEffectOnceGlobally(key, (value) => {
  // runs once per unique key
})

useIsMounted

returns true after component mounts

const isMounted = useIsMounted()

useLastValue

returns previous value from last render

const previousValue = useLastValue(currentValue)

useLastValueIf

conditionally keep last value based on boolean

const value = useLastValueIf(currentValue, shouldKeepLast)

useMemoizedObjectList

memoize list items by identity key, prevents unnecessary re-renders when zero mutates objects

const memoizedList = useMemoizedObjectList(list, 'id')

useMemoStable

useMemo with warnings when dependencies change too often (development only)

const value = useMemoStable(() => expensiveComputation(), deps, {
  name: 'myMemo',
  maxChanges: 5,
})

useThrottle

throttle function calls

const throttledFn = useThrottle(fn, delay)

useWarnIfDepsChange

warn when dependencies change too often (development only)

useWarnIfDepsChange(deps, {
  name: 'myEffect',
  maxChanges: 5,
})

useWarnIfMemoChangesOften

warn when memoized value changes frequently (development only)

useWarnIfMemoChangesOften(value, threshold, 'valueName')