use-custom-compare

use-custom-compare

It's React's useEffect/useMemo/useCallback hooks, except using custom comparison on the inputs, not reference equality

Installation

npm install use-custom-compare

# or

yarn add use-custom-compare

Usage

useCustomCompareEffect

import React from "react";
import { useCustomCompareEffect } from "use-custom-compare";
import isEqual from "lodash/isEqual";

function App({ options }) {
  useCustomCompareEffect(
    () => {
      // do something significant here
      return () => {
        // return to clean up that significant thing
      };
    },
    [options],
    (prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
  );

  return <div>{/* render significant thing */}</div>;
}

useCustomCompareCallback

import React from "react";
import { useCustomCompareCallback } from "use-custom-compare";
import isEqual from "lodash/isEqual";

function App({ options }) {
  const memoized = useCustomCompareCallback(
    () => {
      // do something significant here
    },
    [options],
    (prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
  );

  return <div>{/* render significant thing */}</div>;
}

useCustomCompareMemo

import React from "react";
import { useCustomCompareMemo } from "use-custom-compare";
import isEqual from "lodash/isEqual";

function App({ options }) {
  const memoized = useCustomCompareMemo(
    () => {
      // do something significant here
    },
    [options],
    (prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
  );

  return <div>{/* render significant thing */}</div>;
}

Contributing

Contributions are always welcome! Please read the contributing first.

Inspiration

• use-deep-compare-effect 🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.
• use-deep-compare It's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.
• use-custom-compare-effect useEffect hook which takes a comparison function instead of compare using reference equality.

Contributors

Thanks goes to these wonderful people (emoji key):

Kotaro Sugawara 💻 📖 🤔 🚇 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Kotaro Sugawara

Changelog

1.0.11 (2020-12-10)

Bug Fixes

• deps: [security] bump ini from 1.3.5 to 1.3.7 (7cf42b7)