{"id":11642,"library":"rc-util","title":"rc-util: Common React Utilities","description":"rc-util is a foundational utility library within the React ecosystem, specifically developed to provide common helper functions and components for other React libraries (often those under the `react-component` organization like Ant Design). It offers a suite of low-level utilities such as `createChainedFunction` for combining multiple event handlers, a `deprecated` logger for warning about API changes, and `Portal` for rendering children outside the DOM hierarchy. The current stable version is `5.44.4`. While a specific, detailed release cadence for `rc-util` is not directly specified in the available metadata, the project is actively maintained, receiving updates to address various React development challenges and support newer React versions, as evidenced by related package activity. Its key differentiator lies in its focused, unopinionated approach, providing essential building blocks without imposing architectural patterns, making it a reliable dependency for complex UI component libraries.","status":"active","version":"5.44.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/util","tags":["javascript","react","util","typescript"],"install":[{"cmd":"npm install rc-util","lang":"bash","label":"npm"},{"cmd":"yarn add rc-util","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-util","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React-related utilities and components.","package":"react","optional":false},{"reason":"Peer dependency, particularly for utilities that interact with the DOM or render portals.","package":"react-dom","optional":false}],"imports":[{"note":"This utility is a default export from a deep path within the package. Direct named imports from the root are incorrect.","wrong":"import { createChainedFunction } from 'rc-util';","symbol":"createChainedFunction","correct":"import createChainedFunction from 'rc-util/lib/createChainedFunction';"},{"note":"Similar to other utilities, `deprecated` is a default export from a specific internal path. CommonJS `require` should also target this path.","wrong":"const deprecated = require('rc-util').deprecated;","symbol":"deprecated","correct":"import deprecated from 'rc-util/lib/deprecated';"},{"note":"The `Portal` React component is exported as a default from its specific `/lib/` path. Ensure you use the correct import statement.","wrong":"import { Portal } from 'rc-util';","symbol":"Portal","correct":"import Portal from 'rc-util/lib/Portal';"}],"quickstart":{"code":"import React, { useRef, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport createChainedFunction from 'rc-util/lib/createChainedFunction';\nimport Portal from 'rc-util/lib/Portal';\n\nconst App = () => {\n const [log, setLog] = useState([]);\n const containerRef = useRef(null);\n\n const handleClick1 = () => {\n setLog(prev => [...prev, 'Function 1 called!']);\n };\n\n const handleClick2 = () => {\n setLog(prev => [...prev, 'Function 2 called!']);\n };\n\n const chainedClickHandler = createChainedFunction(handleClick1, handleClick2);\n\n const getPortalContainer = () => {\n if (!containerRef.current) {\n // Create container if it doesn't exist\n const div = document.createElement('div');\n div.id = 'portal-root';\n document.body.appendChild(div);\n containerRef.current = div;\n }\n return containerRef.current;\n };\n\n return (\n
\n

rc-util Demo

\n \n
\n

Event Log:

\n {log.length === 0 ?

No events yet.

: log.map((msg, i) =>

{msg}

)}\n
\n\n
\n Portal Mount Point (conceptually inside App, visually rendered here)\n
\n\n {/* Content rendered into the container obtained from getPortalContainer */}\n \n
\n This content is rendered via Portal!\n
\n \n
\n );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n createRoot(rootElement).render();\n} else {\n console.error(\"Root element with ID 'root' not found in the document.\");\n}\n","lang":"typescript","description":"This quickstart demonstrates how to use `createChainedFunction` to combine multiple event handlers and `Portal` to render content into a specific DOM node, which is useful for overlays or modals."},"warnings":[{"fix":"Always refer to the specific import paths detailed in the `rc-util` documentation or examples, typically `import MyUtil from 'rc-util/lib/myUtil';`.","message":"The `rc-util` library primarily exposes its utilities as default exports from deep paths (e.g., `rc-util/lib/createChainedFunction`). This deviates from common modern practices of named exports directly from the root package, which can lead to 'Module not found' or 'is not a function' errors if users attempt `import { FunctionName } from 'rc-util';`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always check the `rc-util` changelog and release notes for compatibility with new React versions. Upgrade `rc-util` to the latest version compatible with your React installation.","message":"rc-util declares `react` and `react-dom` as peer dependencies (`>=16.9.0`). As React major versions increment (e.g., React 18, React 19), there may be breaking changes in React's APIs that `rc-util`'s internal components or hooks rely on. While `rc-util` aims for compatibility, ensure your installed `rc-util` version is officially tested and compatible with your project's React version.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"When troubleshooting or seeking new features, ensure you are referencing the documentation and changelog specific to the `rc-util` package and your installed version, not potentially related scoped packages.","message":"The commit history provided pertains to `@rc-component/util` (version 1.x.x) rather than `rc-util` (version 5.x.x). While these packages likely share a lineage or common purpose, users should be aware that their specific `rc-util` version `5.44.4` might not directly reflect the features, fixes, or breaking changes detailed in the `@rc-component/util` commit logs. Always refer to `rc-util`'s specific documentation and changelog for the installed version.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the package using your package manager: `npm install rc-util` or `yarn add rc-util`.","cause":"The 'rc-util' package is not installed in the project's dependencies.","error":"ERROR in ./src/App.tsx Module not found: Error: Can't resolve 'rc-util'"},{"fix":"Adjust your import statement to `import createChainedFunction from 'rc-util/lib/createChainedFunction';` for ESM, or `const createChainedFunction = require('rc-util/lib/createChainedFunction');` for CJS.","cause":"Attempting to use a named import or incorrect CommonJS `require` for a utility that is a default export from a specific deep path.","error":"TypeError: (0 , _rc_util_lib_createChainedFunction__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"},{"fix":"Ensure components or hooks that rely on browser APIs are executed only in client-side environments, or use appropriate SSR guards like `typeof window !== 'undefined'` to conditionally render or execute code.","cause":"Trying to use browser-specific APIs (e.g., `document` or `HTMLElement` with `Portal`) in a Node.js server-side rendering (SSR) environment without proper safeguards.","error":"ReferenceError: document is not defined"}],"ecosystem":"npm"}