useResizeObserver

useResizeObserver<T>(ref, callback, options?): void

Defined in: src/hooks/useResizeObserver/useResizeObserver.ts:37

Observe size changes on an element. SSR-safe; cleans up on unmount.

The callback is wrapped in a ref so consumers do not have to memoize it — the underlying observer never re-subscribes when the callback identity changes.

The hook re-checks ref.current on every render so it picks up nodes that mount later (e.g. through conditional rendering). When the observed node has not changed the only cost is a single identity comparison.

Type Parameters

T

T extends HTMLElement

Parameters

ref

RefObject<T | null>

callback

(entry) => void

options?

UseResizeObserverOptions

Returns

void

Example

const ref = useRef<HTMLDivElement>(null);
useResizeObserver(ref, entry => {
  console.log(entry.contentRect.width);
});

return <div ref={ref} />;