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 react-use-custom-compare

# or

yarn add react-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.0 (2020-03-04)

Bug Fixes

• changed to throw error from output console (#4) (871c7af)

Features

• callback: add useCustomCompareCallback (#2) (a4e47ed)
• effect: add useCustomCompareEffect (#1) (d1d70c8)
• memo: add useCustomCompareMemo (#3) (34874fb)
• initial (369670b)