Use Deep Compare

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

Installation

Note: React 16.8+ is required for Hooks.

With npm

npm i use-deep-compare

Or with yarn

yarn 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>;
}

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>;
}

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)"
    }]
  }
}

Credits

• Inspired by use-deep-compare-effect.