Registry / testing / react-addons-shallow-compare

react-addons-shallow-compare

library15.6.3jsnpmunverified

Legacy React addon providing shallow comparison for shouldComponentUpdate, superseded by React.PureComponent in React 15.3. This package (v15.6.3) is no longer maintained and should not be used in new code. It performs a shallow equality check on props and state, returning true if the component should update. Available as an ES6 import, CommonJS require, or script tag via unpkg. Migration path: use React.PureComponent or React.memo for functional components.

testing

npm install react-addons-shallow-compare

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ADDONS-SHALL

react-addons-shallow-compare

testingjavascriptv15.6.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

shallowCompare

✓ import shallowCompare from 'react-addons-shallow-compare';

✗ import { shallowCompare } from 'react-addons-shallow-compare';

This package has a default export, not a named export. Using named import will result in undefined.

shallowCompare

✓ var shallowCompare = require('react-addons-shallow-compare');

✗ var shallowCompare = require('react-addons-shallow-compare').shallowCompare;

CommonJS require returns the function directly; no need to destructure.

shallowCompare

✓ <script src="https://unpkg.com/react-addons-shallow-compare/react-addons-shallow-compare.min.js"></script> // then use React.addons.shallowCompare

✗ // using shallowCompare globally without React.addons

Script tag adds it to React.addons; ensure script is after React.

Shows how to use shallowCompare in a class component's shouldComponentUpdate to prevent unnecessary re-renders.

import React from 'react'; import shallowCompare from 'react-addons-shallow-compare'; class SampleComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); } render() { return <div className={this.props.className}>foo</div>; } }

Debug

Known issues

deprecatedThis package is deprecated and no longer maintained. Use React.PureComponent or React.memo instead.

fix

Replace class component with React.PureComponent, or use React.memo for functional components.

affects: all

gotchaDefault import is a function, not a named export. Using { shallowCompare } will result in undefined.

fix

Use default import: import shallowCompare from 'react-addons-shallow-compare';

affects: all

gotchaIn script tag usage, the function is available as React.addons.shallowCompare, not as a global.

fix

Access via React.addons.shallowCompare, and ensure React is loaded first.

affects: all

Errors

Common errors & fixes

TypeError: shallowCompare is not a function

Using named import instead of default import.

fix

Change to `import shallowCompare from 'react-addons-shallow-compare';`

Cannot find module 'react-addons-shallow-compare'

Package not installed or old npm registry issues.

fix

Run `npm install react-addons-shallow-compare@15.6.3` (or use yarn).

Upgrade

Version history

15.6.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/react ↗

packagereact-addons-shallow-compare ↗

homepagehttps://github.com/facebook/react#readme ↗