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;