Package Exports

use-deep-compare
use-deep-compare/dist-node/index.js
use-deep-compare/dist-web/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-deep-compare) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Use Deep Compare

Use Deep Compare - React hooks, except using deep comparison on the inputs, not reference equality. Read about Hooks feature.

Installation

With npm

npm i use-deep-compare

Or with yarn

yarn add use-deep-compare

Or with pnpm

pnpm add use-deep-compare

Or with bun

bun add use-deep-compare

Usage

useDeepCompareEffect

import React from "react";
import { useDeepCompareEffect } from "use-deep-compare";

function App({ object, array }) {
  useDeepCompareEffect(() => {
    // do something significant here
    return () => {
      // return to clean up that significant thing
    };
  }, [object, array]);

  return <div>{/* render significant thing */}</div>;
}

useDeepCompareCallback

import React from "react";
import { useDeepCompareCallback } from "use-deep-compare";

function App({ object, array }) {
  const callback = useDeepCompareCallback(() => {
    // do something significant here
  }, [object, array]);

  return <div>{/* render significant thing */}</div>;
}

useDeepCompareLayoutEffect

import React from "react";
import { useDeepCompareLayoutEffect } from "use-deep-compare";

function App({ object, array }) {
  useDeepCompareLayoutEffect(() => {
    // perform layout effects
  }, [object, array]);

  return <div>{/* render component */}</div>;
}

useDeepCompareMemo

import React from "react";
import { useDeepCompareMemo } from "use-deep-compare";

function App({ object, array }) {
  const memoized = useDeepCompareMemo(() => {
    // do something significant here
  }, [object, array]);

  return <div>{/* render significant thing */}</div>;
}

useDeepCompareImperativeHandle

import React from "react";
import { useDeepCompareImperativeHandle } from "use-deep-compare";

function App({ object, array }) {
  const ref = React.useRef();
  useDeepCompareImperativeHandle(ref, () => ({
    // create imperative methods
  }), [object, array]);

  return <div ref={ref}>{/* render component */}</div>;
}

react-hooks/exhaustive-deps eslint warnings

To receive eslint warnings about missing array dependencies, just like for standard useEffect, useCallback, useMemo, ... hooks - extend you eslint config as follows:

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "(useDeepCompareEffect|useDeepCompareCallback|useDeepCompareMemo|useDeepCompareImperativeHandle|useDeepCompareLayoutEffect)"
    }]
  }
}

Credits

Inspired by use-deep-compare-effect.