useDeepEqualEffect

Use useDeepEqualEffect when react normal dependecy compare feature doesn't do it. This hook is used in the same way as useEffect but will do a deeper equality check on the dependecy array than React's version.

There is also a useDeepEqualLayoutEffect exported that behaves exactly the same, but will run at the same stage as useLayoutEffect.

const dep = { an: 'object' };
useEffect(effect, [dep]); // this will rerun after each render
useDeepEqualEffect(effect, [dep]); // this will on run on initial render

Usage

import React from 'react';
import { useDeepEqualEffect } from '@fransvilhelm/hooks';
const Checkbox = ({ dep }) => {
  useDeepEqualEffect(() => {
    doSomethingCostly(dep);
  }, [dep]);
  return <p />;
};

Example

<UseDeepEqualEffectExample />

Parameters

useDeepEqualEffect and useDeepEqualLayoutEffect accepts same kind of arguments as useEffect.