{"id":15179,"library":"react-deep-force-update","title":"React Deep Force Update","description":"react-deep-force-update is a specialized utility library designed to recursively force-update a React component tree, bypassing standard `shouldComponentUpdate` checks. It is explicitly *not* intended for use in production application code, but rather for React development tools, such as hot module reloading or debugging utilities, where a deep update is necessary regardless of component lifecycle optimizations. The current stable version is 2.1.3. It has a very slow release cadence, typically updating only when core React features or deprecations necessitate changes, such as the shift to React 0.14. Its key differentiator is its ability to bypass standard React update mechanisms for development-time introspection and manipulation, providing a granular control not available through standard React APIs. This package serves a niche purpose within the React ecosystem.","status":"maintenance","version":"2.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/gaearon/react-deep-force-update","tags":["javascript","react"],"install":[{"cmd":"npm install react-deep-force-update","lang":"bash","label":"npm"},{"cmd":"yarn add react-deep-force-update","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-deep-force-update","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for React component tree manipulation.","package":"react","optional":false},{"reason":"Needed for rendering the root instance to pass to deepForceUpdate.","package":"react-dom","optional":false}],"imports":[{"note":"The library primarily uses a default export. While CommonJS require might technically work in some environments, ESM import is the recommended and modern approach.","wrong":"const deepForceUpdate = require('react-deep-force-update');","symbol":"deepForceUpdate","correct":"import deepForceUpdate from 'react-deep-force-update';"}],"quickstart":{"code":"import React from 'react';\nimport { render } from 'react-dom';\nimport deepForceUpdate from 'react-deep-force-update';\n\n// A simple React component for demonstration\nclass MyComponent extends React.Component {\n  render() {\n    return <div>Hello, {this.props.name}</div>;\n  }\n}\n\n// Render the component into the DOM\nconst container = document.createElement('div');\ndocument.body.appendChild(container);\nconst instance = render(<MyComponent name=\"World\" />, container);\n\n// Simulate an update scenario (e.g., from a dev tool)\nsetTimeout(() => {\n  console.log('Forcing deep update...');\n  deepForceUpdate(instance);\n  console.log('Deep update complete. Check the console for any React warnings if applicable.');\n}, 1000);","lang":"javascript","description":"Demonstrates how to import and use `deepForceUpdate` on a rendered React component instance to force a recursive update, bypassing `shouldComponentUpdate`."},"warnings":[{"fix":"Upgrade your project's React dependency to version 0.14 or later, or stick to react-deep-force-update v1.x if you must use React 0.13.","message":"Version 2.0.0 and later require React 0.14 or newer. Using it with older React versions (e.g., 0.13) will lead to runtime errors or unexpected behavior.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure all components intended for deep updates are defined as ES6 classes extending `React.Component`. This aligns with React 0.14's deprecation of non-extending ES6 classes for components.","message":"As of v2.0.0, only ES6 class components that explicitly inherit `React.Component` will be properly updated when traversing the component tree. Components defined via `createClass()` or other deprecated patterns are no longer fully supported for deep updates.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Do not include this package in your production bundle or use its functionality within your application's logic. It is a development-time-only utility.","message":"This library is strictly for React development tools and should *never* be used in production application code. Its purpose is to override standard React update mechanisms, which can lead to unpredictable behavior and performance issues if used inappropriately in a live application.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For React Native, ensure you are using a version of `react-deep-force-update` that is compatible with your `react-native` version, ideally v2.x once the underlying React Native issue was addressed. If encountering issues, check the `react-native` compatibility notes.","message":"For React Native applications, versions of `react-deep-force-update` prior to a fix for facebook/react-native#2985 may not work correctly. Users were advised to stick to 1.x for React Native until the issue was resolved.","severity":"gotcha","affected_versions":"<2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure the argument passed to `deepForceUpdate` is a valid, mounted React component instance, typically obtained from `ReactDOM.render()` or `ReactDOM.createRoot().render()`.","cause":"Attempting to use `deepForceUpdate` with an invalid React instance or a null/undefined value.","error":"Uncaught TypeError: Cannot read property 'getPublicInstance' of undefined"},{"fix":"Refactor your components to be ES6 classes that explicitly `extend React.Component` to ensure they are fully compatible with deep force updates in newer versions of the library.","cause":"Using `react-deep-force-update` v2.0.0+ with components that do not extend `React.Component` (e.g., using `createClass` or older ES6 class patterns).","error":"Warning: Only ES6 classes that inherit React.Component will be properly updated when walking the tree."}],"ecosystem":"npm"}