Utility

Small standalone utilities that don't fit the other categories.

useMergedRef

Merges a forwarded ref with a component's own internal ref into one callback ref, so a component can keep an internal ref to the same DOM node its parent also has a ref to.

Resizable box

Both refs point at the same node — the parent's forwardedRef scrolls to it, the component's own internalRef measures it.

const mergedRef = useMergedRef(forwardedRef, internalRef);

<div ref={mergedRef} />;

useImage

Tracks image loading state (loading/loaded/error) and provides a retry. error is a real Error (with the original event as its cause), and attemptCount is exposed for building retry UI.

Status: loading

Attempt count: 0

const { loading, error, loaded, retry, attemptCount } = useImage(src, {
  retryCount: 1,
});