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

Credits

• Inspired by use-deep-compare-effect.