CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-fast-compare

Fastest deep equal comparison for React with optimizations for React elements and circular reference handling

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

React Fast Compare

React Fast Compare provides the fastest deep equal comparison for React applications, with optimizations for React elements and built-in circular reference handling. It offers a single unified entry point that handles React-specific circular references like React elements, includes try/catch guardrails for stack overflows, and supports all JavaScript data types.

Package Information

  • Package Name: react-fast-compare
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install react-fast-compare or yarn add react-fast-compare

Core Imports

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

For ES modules/TypeScript:

import isEqual = require('react-fast-compare');

Basic Usage

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

// General deep comparison
console.log(isEqual({ foo: 'bar' }, { foo: 'bar' })); // true
console.log(isEqual([1, 2, 3], [1, 2, 3])); // true

// React.memo usage
const MemoComponent = React.memo(ExpensiveComponent, isEqual);

// shouldComponentUpdate usage  
class Component extends React.Component {
  shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
  }
}

// React-Redux useSelector usage
const value = useSelector(selector, isEqual);

Capabilities

Deep Equality Comparison

Performs deep equality comparison optimized for React applications with circular reference handling.

/**
 * Compare two values for deep equality with React-specific optimizations
 * @param a - First value to compare
 * @param b - Second value to compare  
 * @returns true if values are deeply equal, false otherwise
 */  
function isEqual<A = any, B = any>(a: A, b: B): boolean;

Supported Data Types:

  • Primitives: string, number, boolean, null, undefined, symbol, bigint
  • Objects: Plain objects, arrays
  • Built-in Objects: Date, RegExp, Map, Set, ArrayBuffer views (typed arrays)
  • React Elements: Special handling for React/Preact elements with circular reference avoidance
  • DOM Elements: Special handling for DOM Element instances

React-Specific Features:

  • Circular Reference Handling: Automatically skips _owner, __v, __o properties in React/Preact elements to avoid infinite loops
  • Element Comparison: DOM Element instances always return false (different elements are never equal)
  • Stack Overflow Protection: Catches stack overflow errors from undetected circular references and returns false with console warning

Error Handling:

  • Circular References: Returns false and logs "react-fast-compare cannot handle circular refs" warning
  • Stack Overflow: Detects stack/recursion errors and safely returns false
  • Other Errors: Re-throws unexpected errors for proper debugging

Performance Characteristics:

  • ES5 Compatible: Works in IE9+ and Node.js 0.10+
  • Bundle Size: 656 bytes minified+gzipped
  • Speed: Comparable to fast-deep-equal for general data, optimized for React use cases

Usage Examples:

// Basic object comparison
isEqual({ name: 'Alice', age: 25 }, { name: 'Alice', age: 25 }); // true
isEqual({ name: 'Alice' }, { name: 'Bob' }); // false

// Array comparison  
isEqual([1, 2, [3, 4]], [1, 2, [3, 4]]); // true
isEqual([1, 2, 3], [1, 2, 4]); // false

// Date comparison
isEqual(new Date('2023-01-01'), new Date('2023-01-01')); // true
isEqual(new Date('2023-01-01'), new Date('2023-01-02')); // false

// RegExp comparison
isEqual(/abc/gi, /abc/gi); // true
isEqual(/abc/g, /abc/i); // false

// Map comparison
const map1 = new Map([['a', 1], ['b', 2]]);
const map2 = new Map([['a', 1], ['b', 2]]);
isEqual(map1, map2); // true

// Set comparison
const set1 = new Set([1, 2, 3]);
const set2 = new Set([1, 2, 3]);
isEqual(set1, set2); // true

// React element comparison (skips circular references)
const element1 = React.createElement('div', { id: 'test' }, 'Hello');
const element2 = React.createElement('div', { id: 'test' }, 'Hello');
isEqual(element1, element2); // true (ignores _owner and other circular props)

// Typed array comparison
const arr1 = new Uint8Array([1, 2, 3]);
const arr2 = new Uint8Array([1, 2, 3]);
isEqual(arr1, arr2); // true

Integration Examples:

// React.memo with custom comparison
interface Props {
  data: ComplexObject;
  config: ConfigObject;
}

const OptimizedComponent = React.memo<Props>(({ data, config }) => {
  // Expensive component logic
  return <div>{/* Complex UI */}</div>;
}, isEqual);

// Class component shouldComponentUpdate
class ExpensiveList extends React.Component<ListProps> {
  shouldComponentUpdate(nextProps: ListProps) {
    // Only re-render if props actually changed
    return !isEqual(this.props, nextProps);
  }
  
  render() {
    return (
      <ul>
        {this.props.items.map(item => 
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

// React-Redux useSelector with equality check
const selectUserData = (state: RootState) => ({
  user: state.user,
  preferences: state.preferences,
  settings: state.settings
});

function UserProfile() {
  // Prevents unnecessary re-renders when reference changes but content is same
  const userData = useSelector(selectUserData, isEqual);
  
  return <div>{userData.user.name}</div>;
}

Install with Tessl CLI

npx tessl i tessl/npm-react-fast-compare

docs

index.md

tile.json