or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

React Addons Shallow Compare

React Addons Shallow Compare is a legacy React addon that provides shallow comparison functionality for optimizing component rendering performance. It performs shallow equality checks on component props and state to determine whether a component should re-render, offering the same functionality as the deprecated PureRenderMixin for ES6 class components.

Package Information

Package Name: react-addons-shallow-compare
Package Type: npm
Language: JavaScript
Installation: npm install react-addons-shallow-compare

Core Imports

import shallowCompare from "react-addons-shallow-compare";

For CommonJS:

const shallowCompare = require("react-addons-shallow-compare");

For script tag usage (UMD):

<!-- development version -->
<script src="https://unpkg.com/react-addons-shallow-compare/react-addons-shallow-compare.js"></script>

<!-- production version -->
<script src="https://unpkg.com/react-addons-shallow-compare/react-addons-shallow-compare.min.js"></script>

When using UMD builds, the function is available as React.addons.shallowCompare (requires React to be loaded first).

Basic Usage

import React from "react";
import shallowCompare from "react-addons-shallow-compare";

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>Hello {this.props.name}</div>;
  }
}

Capabilities

Shallow Comparison

Performs shallow comparison of component props and state to determine if a component should update.

/**
 * Does a shallow comparison for props and state.
 * @param {Object} instance - React component instance with current props and state
 * @param {Object} nextProps - Next props object to compare against instance.props
 * @param {Object} nextState - Next state object to compare against instance.state
 * @returns {boolean} - Returns true if component should update (shallow comparison failed), 
 *                      false if component should not update (shallow comparison passed)
 */
function shallowCompare(instance, nextProps, nextState);

Parameters:

instance (Object): React component instance containing current props and state via instance.props and instance.state
nextProps (Object): Next props object to compare against the current props
nextState (Object): Next state object to compare against the current state

Returns:

boolean: Returns true if the component should update (when shallow comparison detects differences), false if the component should not update (when shallow comparison finds no differences)

Usage Examples:

import React from "react";
import shallowCompare from "react-addons-shallow-compare";

// Basic usage in shouldComponentUpdate
class SampleComponent extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <p>Message: {this.props.message}</p>
      </div>
    );
  }
}

// Component will only re-render when props or state actually change
// Prevents unnecessary re-renders when parent component updates with same values
const parent = (
  <SampleComponent message="Hello" />
);

Implementation Details:

The function internally uses Facebook's shallowEqual utility from the fbjs library to perform the comparison. It performs the logical OR of two shallow equality checks:

return (
  !shallowEqual(instance.props, nextProps) ||
  !shallowEqual(instance.state, nextState)
);

Migration Notes:

This is a legacy addon that has been deprecated in favor of React.PureComponent. For modern React applications, use React.PureComponent instead:

// Instead of using shallowCompare
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }
}

// Use React.PureComponent
class MyComponent extends React.PureComponent {
  // No need for shouldComponentUpdate - it's handled automatically
}