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

1npm i use-deep-compare

Or with yarn

1yarn add use-deep-compare

Usage

useDeepCompareEffect

1import React from "react";
2import { useDeepCompareEffect } from "use-deep-compare";
3
4function App({ object, array }) {
5  useDeepCompareEffect(() => {
6    // do something significant here
7    return () => {
8      // return to clean up that significant thing
9    };
10  }, [object, array]);
11
12  return <div>{/* render significant thing */}</div>;
13}

useDeepCompareCallback

1import React from "react";
2import { useDeepCompareCallback } from "use-deep-compare";
3
4function App({ object, array }) {
5  const callback = useDeepCompareCallback(() => {
6    // do something significant here
7  }, [object, array]);
8
9  return <div>{/* render significant thing */}</div>;
10}

useDeepCompareMemo

1import React from "react";
2import { useDeepCompareMemo } from "use-deep-compare";
3
4function App({ object, array }) {
5  const memoized = useDeepCompareMemo(() => {
6    // do something significant here
7  }, [object, array]);
8
9  return <div>{/* render significant thing */}</div>;
10}

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:

1{
2  "rules": {
3    // ...
4    "react-hooks/exhaustive-deps": ["warn", {
5      "additionalHooks": "(useDeepCompareEffect|useDeepCompareCallback|useDeepCompareMemo)"
6    }]
7  }
8}

Credits

• Inspired by use-deep-compare-effect.