React Deep Force Update

Common errors

• Uncaught TypeError: Cannot read property 'getPublicInstance' of undefined

  cause Attempting to use `deepForceUpdate` with an invalid React instance or a null/undefined value.
  fix Ensure the argument passed to `deepForceUpdate` is a valid, mounted React component instance, typically obtained from `ReactDOM.render()` or `ReactDOM.createRoot().render()`.

• Warning: Only ES6 classes that inherit React.Component will be properly updated when walking the tree.

  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).
  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.

Warnings

• breaking 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.
  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.
• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-deep-force-update npm
• yarn add react-deep-force-update yarn
• pnpm add react-deep-force-update pnpm

Imports

• deepForceUpdate
  wrong:

  const deepForceUpdate = require('react-deep-force-update');

  correct:

  import deepForceUpdate from 'react-deep-force-update';

  The library primarily uses a default export. While CommonJS require might technically work in some environments, ESM import is the recommended and modern approach.

Quickstart

Demonstrates how to import and use `deepForceUpdate` on a rendered React component instance to force a recursive update, bypassing `shouldComponentUpdate`.

import React from 'react';
import { render } from 'react-dom';
import deepForceUpdate from 'react-deep-force-update';

// A simple React component for demonstration
class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

// Render the component into the DOM
const container = document.createElement('div');
document.body.appendChild(container);
const instance = render(<MyComponent name="World" />, container);

// Simulate an update scenario (e.g., from a dev tool)
setTimeout(() => {
  console.log('Forcing deep update...');
  deepForceUpdate(instance);
  console.log('Deep update complete. Check the console for any React warnings if applicable.');
}, 1000);