{"id":13450708,"url":"https://github.com/kentcdodds/use-deep-compare-effect","last_synced_at":"2025-05-14T01:08:46.823Z","repository":{"id":38418965,"uuid":"174265014","full_name":"kentcdodds/use-deep-compare-effect","owner":"kentcdodds","description":"🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality","archived":false,"fork":false,"pushed_at":"2024-08-21T08:09:36.000Z","size":118,"stargazers_count":1897,"open_issues_count":7,"forks_count":84,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-04-01T21:16:42.881Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npm.im/use-deep-compare-effect","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kentcdodds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-07T03:30:12.000Z","updated_at":"2025-03-31T15:51:57.000Z","dependencies_parsed_at":"2022-07-11T19:23:42.508Z","dependency_job_id":"1bbc809d-18b8-44d7-8a14-e700483444fa","html_url":"https://github.com/kentcdodds/use-deep-compare-effect","commit_stats":{"total_commits":54,"total_committers":20,"mean_commits":2.7,"dds":0.7222222222222222,"last_synced_commit":"ec3c204ae3a29be7db8e30fc7ca29dd38d1c9441"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fuse-deep-compare-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fuse-deep-compare-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fuse-deep-compare-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fuse-deep-compare-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/use-deep-compare-effect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934841,"owners_count":21020729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:00:37.515Z","updated_at":"2025-04-08T22:19:17.462Z","avatar_url":"https://github.com/kentcdodds.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Packages"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003euse-deep-compare-effect 🐋\u003c/h1\u003e\n\n\u003cp\u003eIt's React's useEffect hook, except using deep comparison on the inputs, not\nreference equality\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![All Contributors][all-contributors-badge]](#contributors-)\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003e WARNING: Please _only_ use this if you really can't find a way to use\n\u003e `React.useEffect`. There's often a better way to do what you're trying to do\n\u003e than a deep comparison.\n\n## The Problem\n\nReact's built-in [`useEffect`][react-hooks] hook has a second argument called\nthe \"dependencies array\" and it allows you to optimize when React will call your\neffect callback. React will do a comparison between each of the values (via\n[`Object.is`][object-is]) to determine whether your effect callback should be\ncalled.\n\nThe problem is that if you need to provide an object for one of those\ndependencies and that object is new every render, then even if none of the\nproperties changed, your effect will get called anyway.\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Other Solutions](#other-solutions)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n  - [💡 Feature Requests](#-feature-requests)\n- [Contributors ✨](#contributors-)\n- [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's dependencies:\n\n```shell\nnpm install --save use-deep-compare-effect\n```\n\n## Usage\n\nYou use it in place of `React.useEffect`.\n\n\u003e NOTE: Only use this if your values are objects or arrays that contain objects.\n\u003e Otherwise, you should just use `React.useEffect`. In case of \"polymorphic\"\n\u003e values (eg: sometimes object, sometimes a boolean), use\n\u003e `useDeepCompareEffectNoCheck`, but do it at your own risk, as maybe there can\n\u003e be better approaches to the problem.\n\n\u003e NOTE: Be careful when your dependency is an object which contains a function.\n\u003e If that function is defined on the object during a render, then it's changed\n\u003e and the effect callback will be called every render.\n\u003e [Issue](https://github.com/kentcdodds/use-deep-compare-effect/issues/47) has more context.\n\nExample:\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nfunction Query({query, variables}) {\n  // some code...\n\n  useDeepCompareEffect(\n    () =\u003e {\n      // make an HTTP request or whatever with the query and variables\n      // optionally return a cleanup function if necessary\n    },\n    // query is a string, but variables is an object. With the way Query is used\n    // in the example above, `variables` will be a new object every render.\n    // useDeepCompareEffect will do a deep comparison and your callback is only\n    // run when the variables object actually has changes.\n    [query, variables],\n  )\n\n  return \u003cdiv\u003e{/* awesome UI here */}\u003c/div\u003e\n}\n```\n\n## Other Solutions\n\n[use-custom-compare-effect](https://github.com/sanjagh/use-custom-compare-effect)\n\n## Issues\n\n_Looking to contribute? Look for the [Good First Issue][good-first-issue]\nlabel._\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**][bugs]\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\n## Contributors ✨\n\nThanks goes to these people ([emoji key][emojis]):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://kentcdodds.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1500684?v=3?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKent C. Dodds\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=kentcdodds\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=kentcdodds\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-kentcdodds\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=kentcdodds\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://linkedin.com/in/edygar/en\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/566280?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEdygar de Lima Oliveira\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=edygar\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=edygar\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://stackshare.io/jdorfman/decisions\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/398230?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJustin Dorfman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#fundingFinding-jdorfman\" title=\"Funding Finding\"\u003e🔍\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://antonhalim.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/10498035?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnton Halim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=antonhalim\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://michaeldeboey.be\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6643991?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichaël De Boey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=MichaelDeBoey\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://linkedin.com/in/tbueschel\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/13087421?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTobias Büschel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=tobiasbueschel\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://peter.hozak.info/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1087670?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeter Hozák\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/pulls?q=is%3Apr+reviewed-by%3AAprillion\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ricardobusquet.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/7198302?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRicardo Busquet\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/pulls?q=is%3Apr+reviewed-by%3Arbusquet\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/daveisfera\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1686193?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDave Johansen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/issues?q=author%3Adaveisfera\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/samuel-knutson\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/2458585?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSam Knutson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=samuel-knutson\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://albertlucianto.github.io\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/23165866?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlbert Lucianto\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/issues?q=author%3AAlbertLucianto\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=AlbertLucianto\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=AlbertLucianto\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jasperck\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5002476?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJasper Chang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=jasperck\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/cvolant\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/37238472?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ecvolant\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=cvolant\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/phwebi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2031802?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePhoebe Gao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=phwebi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ablakey\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9021944?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrew Blakey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=ablakey\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/mkarots\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7574557?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e@mkarots\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/use-deep-compare-effect/commits?author=mkarots\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n## LICENSE\n\nMIT\n\n\u003c!-- prettier-ignore-start --\u003e\n[npm]: https://www.npmjs.com\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/github/workflow/status/kentcdodds/use-deep-compare-effect/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/kentcdodds/use-deep-compare-effect/actions?query=workflow%3Avalidate\n[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/use-deep-compare-effect.svg?style=flat-square\n[coverage]: https://codecov.io/github/kentcdodds/use-deep-compare-effect\n[version-badge]: https://img.shields.io/npm/v/use-deep-compare-effect.svg?style=flat-square\n[package]: https://www.npmjs.com/package/use-deep-compare-effect\n[downloads-badge]: https://img.shields.io/npm/dm/use-deep-compare-effect.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/use-deep-compare-effect\n[license-badge]: https://img.shields.io/npm/l/use-deep-compare-effect.svg?style=flat-square\n[license]: https://github.com/kentcdodds/use-deep-compare-effect/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/kentcdodds/use-deep-compare-effect/blob/master/CODE_OF_CONDUCT.md\n[emojis]: https://github.com/all-contributors/all-contributors#emoji-key\n[all-contributors]: https://github.com/all-contributors/all-contributors\n[all-contributors-badge]: https://img.shields.io/github/all-contributors/kentcdodds/use-deep-compare-effect?color=orange\u0026style=flat-square\n[bugs]: https://github.com/kentcdodds/use-deep-compare-effect/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug\n[requests]: https://github.com/kentcdodds/use-deep-compare-effect/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement\n[good-first-issue]: https://github.com/kentcdodds/use-deep-compare-effect/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22\n[react-hooks]: https://reactjs.org/docs/hooks-effect.html\n[object-is]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n\u003c!-- prettier-ignore-end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fuse-deep-compare-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Fuse-deep-compare-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fuse-deep-compare-effect/lists"}