rc-util

rc-util is a grab-bag of small, focused React utilities — hooks like useEvent, useMergedState, and useLayoutEffect, DOM helpers like canUseDom and dynamicCSS, ref-composition helpers, and a warning/noteOnce dev-time logging pair — extracted so every rc-component-family package (and Ant Design itself) can share the same well-tested primitives instead of reimplementing them.

Rather than a themed or opinionated toolkit, it’s an internal-infrastructure library: most consumers pull it in transitively as a dependency of Ant Design’s rc-* component packages, though any React project can import it directly for the same low-level conveniences (controlled-state hooks, ref merging, SSR-safe DOM checks) it provides them.

What You Get

• State hooks: useMergedState, useControlledState, useEvent, useDelayState, useSyncState, useLayoutEffect
• Ref utilities: composeRef, fillRef, useComposeRef, supportRef for merging multiple refs safely
• DOM helpers: canUseDom, contains, dynamicCSS (inject/remove/update <style> tags), getFocusNodeList, isVisible
• Dev-time diagnostics: warning/noteOnce for deduplicated console warnings, plus resetWarned for test isolation
• General helpers: omit, pickAttrs, isEqual, mergeProps, get/set/merge deep object utilities, and raf-based animation scheduling

Common Use Cases

• Building custom React component libraries that need the same controlled/uncontrolled state pattern as Ant Design components
• Merging multiple refs (e.g. a forwarded ref plus an internal one) safely across React versions
• Injecting or updating dynamic <style> tags for CSS-in-JS-adjacent styling needs
• Adding SSR-safe DOM feature checks (canUseDom, isStyleSupport) to isomorphic React code
• Emitting deduplicated development warnings for deprecated props or invalid usage without console spam

Under The Hood

Architecture - The package has no single entry class; src/index.ts is a flat re-export barrel over independently testable modules grouped by folder (hooks/, Dom/, React/, Children/, utils/), so each utility (a hook, a DOM check, a ref helper) is its own small file with its own test, and consumers tree-shake only what they import. Cross-cutting concerns like ref merging (ref.ts) and controlled-state (useMergedState/useControlledState) are implemented once here and re-exported for every rc-component sibling package (rc-select, rc-table, rc-virtual-list, etc.) to depend on identically. Tech Stack - TypeScript with minimal runtime dependencies (is-mobile, react-is), built via the father build tool (rc-component’s shared tooling) into ES/CJS output with dumi-generated docs; React itself is a peer dependency, not bundled. Code Quality - A large tests/ directory mirrors nearly every source file 1:1 (including a hooks-17.test.tsx variant for React 17 compatibility), giving strong regression coverage for a library whose consumers span the entire Ant Design component tree; some exports like useMergedState are explicitly marked @deprecated in favor of newer alternatives (useControlledState), showing an actively curated, versioned API rather than accumulated cruft. API Design - Everything is a flat, individually-importable named export (import { useEvent, canUseDom } from '@rc-component/util') rather than a monolithic default object, so consumers only pull in the specific hook or helper they need; deprecation notices in JSDoc guide migration without breaking existing imports.