use-shallow-effect

useEffect drop in replacement with dependencies shallow comparison
Import

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 render
useEffect(() => {}, [{ a: 1 }]);
// Will be called only once
useShallowEffect(() => {}, [{ a: 1 }]);

Hook works with primitive values, arrays and objects:

// Primitive values are handled like in useEffect
useShallowEffect(() => {}, [1, 2, 3]);
// Arrays with primitive values will not trigger callback
useShallowEffect(() => {}, [[1], [2], [3]]);
// Objects with primitive values will not trigger callback
useShallowEffect(() => {}, [{ a: 1 }, { b: 2 }]);
// Arrays with objects will trigger callback since values are not shallow equal
useShallowEffect(() => {}, [[{ a: 1 }], [{ b: 2 }]]);

Definition

function useShallowEffect(cb: () => void, dependencies?: React.DependencyList): void;
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback