It's react's useEffect hook, except using deep comparison on the inputs, not reference equality. Latest version: 1.8.1, last published: 4 years ago. Start using use-deep-compare-effect in your project by running `npm i use-deep-compare-effect`. There are 339 other projects in the npm registry using use-deep-compare-effect.

July 20, 2024 - import React from "react"; import { useDeepCompareEffect } from "use-deep-compare"; function App({ object, array }) { useDeepCompareEffect(() => { // do something significant here return () => { // return to clean up that significant thing }; }, [object, array]); return <div>{/* render significant thing */}</div>; }

React will do a comparison between each of the values (via Object.is) to determine whether your effect callback should be called. The problem is that if you need to provide an object for one of those dependencies and that object is new every ...

December 3, 2020 - Start using @types/use-deep-compare-effect in your project by running `npm i @types/use-deep-compare-effect`. There are 1 other projects in the npm registry using @types/use-deep-compare-effect.

An important project maintenance signal to consider for use-deep-compare-effect is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

npm trends · It's react's useEffect hook, except using deep comparison on the inputs, not reference equality · use-deep-compare-effect · Bytes is a JavaScript newsletter you'll actually enjoy reading. Delivered every Monday, for free.

npm install --save use-deep-compare-effect · You use it in place of React.useEffect. NOTE: Only use this if your values are objects or arrays that contain objects. Otherwise you should just use React.useEffect. In case of "polymorphic" values (eg: sometimes object, sometimes a boolean), use useDeepCompareEffectNoCheck, but do it at your own risk, as maybe there can be better approaches to the problem.

Documentation for npm package use-deep-compare-effect@1.8.1 - jsDocs.io

"module": "dist/use-deep-compare-effect.esm.js", "types": "dist/index.d.ts", "engines": { "node": ">=10", "npm": ">=6" }, "scripts": { "build": "kcd-scripts build --bundle", "lint": "kcd-scripts lint", "setup": "npm install && npm run validate -s", "test": "kcd-scripts test", "test:update": "npm test -- --updateSnapshot --coverage", "typecheck": "kcd-scripts typecheck", "validate": "kcd-scripts validate" }, "files": [ "dist" ], "keywords": [], "author": "Kent C.

...options, }, }) if (whileTap || whileHover) { useWhileInteraction({ ref, animateToFrame, from: to, whileHover, whileTap, }) } // Deep compare the `animate|to` @Frame so that we can animate updates.

## Table of Contents <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> - [Installation](#installation) - [Usage](#usage) - [Other Solutions](#other-solutions) - [Contributors](#contributors) - [LICENSE](#license) <!-- END doctoc generated TOC please keep comment here to allow auto update --> ## Installation This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's `dependencies`: ``` npm install --save use-deep-compare-effect ``` ## Usage You use it in place of `React.useEffect`. > NOTE: Only use this if your values are objects or arrays that contain objects.

March 5, 2020 - It will not do a reference equality check but a deep comparison before trying to run the effect. Installation per NPM/Yarn · npm install use-deep-compare-effect · useDeepCompareEffect → · Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google.

import React from "react"; import { useDeepCompareEffect } from "use-deep-compare"; function App({ object, array }) { useDeepCompareEffect(() => { // do something significant here return () => { // return to clean up that significant thing }; }, [object, array]); return <div>{/* render significant thing */}</div>; }

Find the size of javascript package use-deep-compare-effect. Bundlephobia helps you find the performance impact of npm packages.

It's react's useEffect hook, except using deep comparison on the inputs, not reference equality

May 26, 2020 - const prevDeeplyNestedObject = usePrevious(deeplyNestedObject) useEffect(()=>{ if ( !_.isEqual( prevDeeplyNestedObject, deeplyNestedObject, ) ) { // ...execute your code } },[deeplyNestedObject, prevDeeplyNestedObject])

January 9, 2026 - A React hook that works like useEffect but performs deep comparison on dependencies instead of shallow comparison.

import React from "react"; import { useDeepCompareEffect } from "use-deep-compare"; function App({ object, array }) { useDeepCompareEffect(() => { // do something significant here return () => { // return to clean up that significant thing }; }, [object, array]); return <div>{/* render significant thing */}</div>; }

April 29, 2021 - use-deep-compare-effect version: 1.6.1 What you did: Pass a nested object with/without a function as deps What happened: A nested object with property has function as value will break deep compare and trigger the hooks Reproduction repos...