use-compare

use-compare - React Hooks, except using deep comparison on the inputs, not reference equality. You can customize the comparison function.

Installation

npm

npm i use-compare

yarn

yarn add use-compare

pnpm

pnpm add use-compare

Usage

useDeepCompareEffect

import { useDeepCompareEffect } from 'use-compare'

const Button = ({ object, array }) => {
  useDeepCompareEffect(() => {
    // do something
  }, [object, array])
  return <button>click</button>
}
// Or, You can customize the comparison function.
const isEqual = (prevValue, value) => {
  // do your comparison about prevValue and value to return true or false
  return boolean
}
const Button = ({ object, array }) => {
  useDeepCompareEffect(
    () => {
      // do something
    },
    [object, array],
    isEqual
  )
  return <button>click</button>
}

useDeepCompareCallback

import { useDeepCompareCallback } from 'use-compare'

const Button = ({ object, array }) => {
  useDeepCompareCallback(() => {
    // do something
  }, [object, array])
  return <button>click</button>
}
// Or, You can customize the comparison function.
const isEqual = (prevValue, value) => {
  // do your comparison about prevValue and value to return true or false
  return boolean
}
const Button = ({ object, array }) => {
  useDeepCompareCallback(
    () => {
      // do something
    },
    [object, array],
    isEqual
  )
  return <button>click</button>
}

useDeepCompareMemo

import { useDeepCompareMemo } from 'use-compare'

const Button = ({ object, array }) => {
  useDeepCompareMemo(() => {
    // do something
  }, [object, array])
  return <button>click</button>
}
// Or, You can customize the comparison function.
const isEqual = (prevValue, value) => {
  // do your comparison about prevValue and value to return true or false
  return boolean
}
const Button = ({ object, array }) => {
  useDeepCompareMemo(
    () => {
      // do something
    },
    [object, array],
    isEqual
  )
  return <button>click</button>
}