use-deep-compare

What is use-deep-compare?

The `use-deep-compare` package provides React hooks that perform deep comparison of dependencies to determine if they have changed, which can be useful for optimizing performance and avoiding unnecessary re-renders.

What are use-deep-compare's main functionalities?

useDeepCompareEffect

The `useDeepCompareEffect` hook works similarly to `useEffect`, but it performs a deep comparison of the dependencies. This is useful when you have complex objects or arrays as dependencies and want to avoid unnecessary re-renders.

import { useDeepCompareEffect } from 'use-deep-compare';
import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState({ key: 'value' });

  useDeepCompareEffect(() => {
    console.log('Effect triggered due to deep comparison');
  }, [data]);

  return <div>{data.key}</div>;
};

useDeepCompareMemo

The `useDeepCompareMemo` hook works similarly to `useMemo`, but it performs a deep comparison of the dependencies. This is useful for memoizing values derived from complex objects or arrays.

import { useDeepCompareMemo } from 'use-deep-compare';
import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState({ key: 'value' });

  const memoizedValue = useDeepCompareMemo(() => {
    return data.key;
  }, [data]);

  return <div>{memoizedValue}</div>;
};

Other packages similar to use-deep-compare

react-use

The `react-use` package is a collection of essential React hooks, including hooks for deep comparison like `useDeepCompareEffect` and `useDeepCompareMemo`. It offers a broader range of hooks for various use cases, making it a more comprehensive solution compared to `use-deep-compare`.

ahooks

The `ahooks` package is a React Hooks library that provides a wide range of hooks, including deep comparison hooks like `useDeepCompareEffect` and `useDeepCompareMemo`. It is well-documented and widely used, offering more features and utilities beyond deep comparison.

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.