Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Runs an effect only when dependencies change by shallow comparison
shallowEqual. This is useful when working with objects or arrays that may have the same content but different references.
import { useShallowEffect } from '@kuzenbo/hooks';
import { useState } from 'react';
function Demo() {
const [filters, setFilters] = useState({ category: 'all', search: '' });
useShallowEffect(() => {
console.log('Filters changed:', filters);
// This only runs when the actual values change,
// not when a new object with same values is created
}, [filters]);
const updateCategory = (category: string) => {
setFilters({ ...filters, category });
};
return (
<div>
<button onClick={() => updateCategory('books')}>Books</button>
<button onClick={() => updateCategory('movies')}>Movies</button>
</div>
);
}
import { useShallowEffect } from '@kuzenbo/hooks';
import { useState } from 'react';
function Demo() {
const [items, setItems] = useState([1, 2, 3]);
useShallowEffect(() => {
console.log('Items array changed:', items);
}, [items]);
const addItem = () => {
setItems([...items, items.length + 1]);
};
return (
<div>
<p>Items: {items.join(', ')}</p>
<button onClick={addItem}>Add Item</button>
</div>
);
}
function useShallowEffect(
cb: () => void,
dependencies?: DependencyList
): void