`fast-deep-equal` package in Puck codebase.

In this article, we review fast-deep-equal package in Puck codebase. We will look at:

What is fast-deep-equal package?
Usage in Puck codebase.

What is fast-deep-equal package?

fast-deep-equal package the fastest deep equality check with Date, RegExp and ES6 Map, Set and typed arrays support.

Install


npm install fast-deep-equal

Features

ES5 compatible
works in node.js (8+) and browsers (IE9+)
checks equality of Date and RegExp objects by value.

ES6 equal (require('fast-deep-equal/es6')) also supports:

Maps
Sets
Typed arrays

Usage


var equal = require('fast-deep-equal');
console.log(equal({foo: 'bar'}, {foo: 'bar'})); // true

To support ES6 Maps, Sets and Typed arrays equality use:


var equal = require('fast-deep-equal/es6');
console.log(equal(Int16Array([1, 2]), Int16Array([1, 2]))); // true

To use with React (avoiding the traversal of React elements’ _owner property that contains circular references and is not needed when comparing the elements — borrowed from react-fast-compare):


var equal = require('fast-deep-equal/react');
var equal = require('fast-deep-equal/es6/react');

Learn more about fast-deep-equal.

Usage in Puck codebase.

In puck/packages/core/lib/get-changed.ts, you will find the following code:


import { ComponentData } from "../types";
import fdeq from "fast-deep-equal";
 
export const getChanged = (
  newItem: Omit<Partial<ComponentData<any>>, "type"> | undefined,
  oldItem: Omit<Partial<ComponentData<any>>, "type"> | null | undefined
) => {
  return newItem
    ? Object.keys(newItem.props || {}).reduce((acc, item) => {
        const newItemProps = newItem?.props || {};
        const oldItemProps = oldItem?.props || {};
 
        return {
          ...acc,
          [item]: !fdeq(oldItemProps[item], newItemProps[item]),
        };
      }, {})
    : {};
};

This code tells us that you could import something like fdeq from the fast-deep-equal.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.