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.