@react-hook/resize-observer

@react-hook/resize-observer is a small, strongly-typed React hook that subscribes an element to the browser’s native ResizeObserver API and invokes a callback whenever its size changes. It is one member of the react-hook monorepo — a collection of independently published, single-purpose React hooks — and is itself the foundation that higher-level hooks in the same repo (@react-hook/size, @react-hook/window-size) build on for element and viewport measurement.

Internally it maintains a single shared ResizeObserver instance per page (rather than one per component), batching entries and dispatching callbacks inside requestAnimationFrame to avoid the layout-thrashing and redundant-instance overhead of naively creating a new observer per hook call. It accepts refs, raw elements, or forwarded refs as targets, and accepts an optional polyfill for environments without native ResizeObserver support.

What You Get

• A useResizeObserver(target, callback, options) hook accepting a ref, forwarded ref, or raw DOM element as the target
• A shared, singleton ResizeObserver instance reused across every hook call on the page instead of one per component
• requestAnimationFrame-batched callback dispatch, so many simultaneous resizes don’t fire callbacks synchronously per entry
• An optional polyfill option for browsers without native ResizeObserver support
• Foundation for the sibling @react-hook/size and @react-hook/window-size hooks published from the same monorepo

Common Use Cases

• Measuring an element’s rendered dimensions to drive responsive internal layout (e.g. switching a chart’s orientation based on container width)
• Building custom size-tracking hooks (as @react-hook/size does) on top of a shared, efficient observer primitive
• Virtualized lists or canvases that must re-measure their container whenever it resizes (window resize, sidebar toggle, split-pane drag)
• Component libraries that need per-instance resize callbacks without each instance instantiating its own native ResizeObserver

Under The Hood

Architecture - The hook itself (packages/resize-observer/src/index.tsx) is a thin subscription layer: getResizeObserver() lazily creates one module-level ResizeObserver via createResizeObserver(), which maintains a Map of target elements to arrays of callbacks. The native observer’s own callback accumulates all entries received in a tick, and on the first entry schedules a single requestAnimationFrame flush that dispatches each target’s most recent entry to its subscribed callbacks, deduplicating targets that resized multiple times in the same frame. The hook subscribes/unsubscribes through useLayoutEffect (from the sibling @react-hook/passive-layout-effect package) and stores the latest callback via @react-hook/latest to avoid stale closures without re-subscribing on every render.

Tech Stack - TypeScript, built with lundle (multi-format ESM/CJS/UMD bundler) into dist/main, dist/module, dist/esm, and dist/umd outputs plus hand-maintained .d.ts types; part of a Yarn/Lerna-style monorepo (packages/*) with no build-tool coupling to the other hooks beyond declared npm dependencies (@react-hook/latest, @react-hook/passive-layout-effect).

Code Quality - A single src/index.test.tsx under Jest with @testing-library/react covers the hook’s subscribe/unsubscribe behavior; the implementation is compact (~105 lines) with clear separation between the public hook and the internal shared-observer factory. Repository-wide activity has slowed (last publish mid-2024, low recent commit velocity per the health scan), so it should be treated as stable-but-low-maintenance rather than actively evolving.

API Design - The useResizeObserver(target, callback, options) signature accepts refs, forwarded refs, or raw elements interchangeably, minimizing friction for both function and class-adjacent (forwardRef) component patterns. Returning the raw shared ResizeObserver instance from the hook is a deliberate escape hatch for advanced consumers who need direct access, while the default path requires zero manual cleanup since unsubscription is handled by the useLayoutEffect return function.