use-shallow-effect
useEffect drop in replacement with dependencies shallow comparison
Import
Source
Docs
Package
Usage
use-shallow-effect works exactly like useEffect but performs shallow dependencies comparison instead of referential comparison:
import { useEffect } from 'react';import { useShallowEffect } from '@mantine/hooks';// Will be called on each renderuseEffect(() => {}, [{ a: 1 }]);// Will be called only onceuseShallowEffect(() => {}, [{ a: 1 }]);
Hook works with primitive values, arrays and objects:
// Primitive values are handled like in useEffectuseShallowEffect(() => {}, [1, 2, 3]);// Arrays with primitive values will not trigger callbackuseShallowEffect(() => {}, [[1], [2], [3]]);// Objects with primitive values will not trigger callbackuseShallowEffect(() => {}, [{ a: 1 }, { b: 2 }]);// Arrays with objects will trigger callback since values are not shallow equaluseShallowEffect(() => {}, [[{ a: 1 }], [{ b: 2 }]]);
Definition
function useShallowEffect(cb: () => void, dependencies?: React.DependencyList): void;
Built by Vitaly Rtishchev and these awesome people