shallow-equal

What is shallow-equal?

The shallow-equal npm package is primarily used to perform shallow equality checks on objects and arrays. This means it checks if two objects or arrays have the same values at the top level, without deeply checking nested objects or arrays. It is commonly used in React and other frameworks to optimize rendering by preventing unnecessary updates when data has not effectively changed.

What are shallow-equal's main functionalities?

Shallow equality check for objects

This feature allows you to compare two objects to determine if they have the same top-level properties with equal values.

const shallowEqual = require('shallow-equal/objects');
const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
console.log(shallowEqual(obj1, obj2)); // true

Shallow equality check for arrays

This feature enables the comparison of two arrays to check if they contain the same elements in the same order, without considering nested arrays or objects.

const shallowEqual = require('shallow-equal/arrays');
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(shallowEqual(arr1, arr2)); // true

Other packages similar to shallow-equal

shallowequal

This package offers similar functionality to shallow-equal, providing a simple and efficient way to compare objects and arrays shallowly. It is often used in similar contexts for optimizing performance in UI frameworks.

react-fast-compare

Although primarily designed for use with React, react-fast-compare offers optimized deep comparison functions that can be more comprehensive than shallow-equal when deeper object structures need to be compared. It is more suitable when nested data structures are involved but is generally slower for shallow comparisons.

README

Description

If you know you have two arrays or two objects in hand, and you want to know if they are shallowly equal or not, this library is for you.

Features

• Super light
• No dependencies
• Thoroughly tested

Installation

npm install shallow-equal --save

or

yarn add shallow-equal

Usage

import { shallowEqualArrays } from "shallow-equal";

shallowEqualArrays([1, 2, 3], [1, 2, 3]); // => true
shallowEqualArrays([{ a: 5 }], [{ a: 5 }]); // => false

import { shallowEqualObjects } from "shallow-equal";

shallowEqualObjects({ a: 5, b: "abc" }, { a: 5, b: "abc" }); // => true
shallowEqualObjects({ a: 5, b: {} }, { a: 5, b: {} }); // => false

You can also use the generic form, shallowEqual. But note that it does runtime type checking in order to decide whether it's comparing arrays or objects, so the convenience comes with a runtime penalty.

import { shallowEqual } from "shallow-equal";

shallowEqual([1, 2, 3], [1, 2, 3]); // => true
shallowEqual({ a: 5, b: {} }, { a: 5, b: {} }); // => false