@rounik/react-custom-hooks

useBeforeFirstRender

Use to execute a callback before the initial render

Synchronous hook that runs before the initial render and never again.

useEffectOnce

Use in order to execute effect once

Allows implementing mount and unmount hooks whose callbacks will be executed only once. Useful in order to prevent React.StrictMode double effect execution between rendering.

useIsMounted

Use to validate if a component is rendered in the DOM

Returns MutableRefObject<boolean> with value true if the component is rendered in the DOM.

useLayoutUpdate

Use to execute updates before the component is rendered in the DOM

Wrapper over useLayoutEffect with 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useLayoutUpdateOnly

Use to execute update only before the component is rendered in the DOM

Wrapper over useLayoutEffect with the difference that it is executed only once. The hook allows 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useMount

Use to execute some logic on component mount

Wrapper over useEffect with an empty array as a dependency list.

useUnmount

Use to execute some logic on component unmount

Wrapper over useEffect cleanup function with an empty array as a dependency list.

useUpdate

Use to execute updates after the component is rendered in the DOM

Wrapper over useEffect with 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useUpdateOnly

Use to execute update only after the component is rendered in the DOM

Wrapper over useEffect with the difference that it is executed only once. The hook allows 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useUpdateSync

Use to execute some update synchronously

Runs a callback when there is an update. Does not rely on effect. The hook allows 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useCallbackDebounced

Use to return a memoized and debounced function

Wrapper over useCallback which returns a debounced function. The diffing is based on 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useCallbackDebouncedPromisified

Use to return a memoized and debounced async function

Wrapper over useCallback which returns a debounced async function. The diffing is based on 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useCallbackExtended

Use to return a memoized function

Wrapper over useCallback with 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useClass

Use for building a className based on a dependency list

Builds a className string from an array of classNames including conditional ones. The conditions are based on dependency values.

useDependencyList

Use to return a memoized dependency list

Builds a dependency list using memoization based on 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useMemoExtended

Use to return a memoized value

Wrapper over useMemo with 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useKeyboardEvent

Use to add keyboard event listeners

Adds keyboard event listeners to the document.

useMutationObserver

Use to create MutationObserver for observing certain DOM tree

Creates a MutationObserver instance for observing certain DOM tree. Receives a callback function which is executed on every mutation and a configuration for Mutation observation.

useOnOutsideClick

Use to execute some logic on element outside click

Runs a callback when there is a click outside a target HTML Element.

useResizeObserver

Use to create ResizeObserver for observing changes to the dimensions of an Element

Creates a ResizeObserver instance for observing dimensions changes of a certain Element. Receives a callback function which is executed on every change.

useWindowResize

Use to execute some logic on window resize

Runs a debounced callback on window "resize" event

useContextReducer

Use for wiring up useReducer state and actions

Builds a Context API value of state and actions using React useReducer hook.

useLastDiffValue

Use to return the last different value from a sequence of all values

Returns the last different value. If there are no value updates the last different value is undefined. The diffing is based on 3 comparison options - default React, default comparator (using dequal) or custom comparator.

useUpdatedRef

Use to return a value from MutableRefObject

Creates and returns a MutableRefObject based on value updates. The hook allows 3 comparison options - default React, default comparator (using dequal) or custom comparator.