Registry / web-framework / react-fast-compare

react-fast-compare

library3.2.2jsnpmunverified

React Fast Compare is a highly optimized library for deep equality comparison, primarily designed for performance enhancements in React applications, specifically with `React.memo` and `shouldComponentUpdate`. Based on `fast-deep-equal`, it extends functionality to handle React-specific circular references, such as those found in React elements, while generally avoiding non-React circular references. The current stable version is 3.2.2, with recent patch releases indicating active maintenance. It boasts a minimal bundle size (under 660 bytes minified+gzipped) and broad compatibility, working in Node.js (0.10+) and browsers (IE9+) due to its ES5 compatibility. This library differentiates itself by offering equivalent speed to `fast-deep-equal` for generic data types, coupled with crucial guardrails for React-specific data structures, making it a robust choice when deep equality checks are truly necessary after performance profiling.

web-framework

npm install react-fast-compare

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FAST-COMPARE

react-fast-compare

web-frameworkjavascriptv3.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

isEqual

✓ import isEqual from 'react-fast-compare';

✗ import { isEqual } from 'react-fast-compare';

The library exports the comparison function as its default export in ESM environments.

isEqual

✓ const isEqual = require('react-fast-compare');

This is the standard CommonJS import pattern, compatible with Node.js and older bundler setups.

isEqual

✓ import isEqual from 'react-fast-compare/index.js';

For explicit ESM resolution in some Node.js environments or bundlers, specifying the full path might be necessary.

This quickstart demonstrates both general-purpose deep equality checking and its primary use case with `React.memo` to prevent unnecessary component re-renders due to deeply equal props.

import React from 'react'; import isEqual from 'react-fast-compare'; const ExpensiveComponent = ({ data }) => { console.log('ExpensiveComponent rendered!'); return <div>{JSON.stringify(data)}</div>; }; // Using isEqual with React.memo for deep comparison of props const DeepMemoComponent = React.memo(ExpensiveComponent, isEqual); // Example usage with a regular functional component const MyComponent = () => { const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { a: 1, b: { c: 2 } }; const obj3 = { a: 1, b: { c: 3 } }; console.log('General deep comparison:', isEqual(obj1, obj2)); // true console.log('General deep comparison:', isEqual(obj1, obj3)); // false return ( <div> <p>Is obj1 equal to obj2? {String(isEqual(obj1, obj2))}</p> <p>Is obj1 equal to obj3? {String(isEqual(obj1, obj3))}</p> <DeepMemoComponent data={obj1} /> <DeepMemoComponent data={obj2} /> {/* Will not re-render DeepMemoComponent if obj1 and obj2 are deeply equal */} </div> ); }; export default MyComponent;

Debug

Known issues

gotchaBlindly applying deep equality checks with `React.memo` or `shouldComponentUpdate` can lead to performance degradation if the comparison itself is more expensive than a re-render. Always profile your application to confirm deep comparison is a necessary optimization.

fix

First, attempt to optimize component re-renders using default `React.memo` or `PureComponent`. If a bottleneck is identified and deep comparison is truly needed, apply this library minimally and strategically after profiling.

affects: >=1.0.0

gotchaWhile `react-fast-compare` handles React-specific circular references (like elements), it does not generally handle arbitrary JavaScript objects with circular references outside of React's specific structures. Comparing such objects may lead to infinite loops or unexpected behavior.

fix

Ensure the objects you are comparing do not contain non-React circular references. If they do, consider restructuring the data or implementing custom comparison logic for those specific structures.

affects: >=1.0.0

Upgrade

Version history

3.2.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/FormidableLabs/react-fast-compare ↗

packagehttps://www.npmjs.com/package/react-fast-compare ↗