{"id":19281572,"url":"https://github.com/simbathesailor/use-what-changed","last_synced_at":"2025-05-15T13:08:30.521Z","repository":{"id":39545686,"uuid":"222103697","full_name":"simbathesailor/use-what-changed","owner":"simbathesailor","description":"A React hook and an easy to use babel-pugin to debug various React official hooks","archived":false,"fork":false,"pushed_at":"2023-01-05T00:59:17.000Z","size":2569,"stargazers_count":732,"open_issues_count":36,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-15T05:32:08.988Z","etag":null,"topics":["debugging","hacktoberfest","react-hooks","react-native","reactjs","usecallback-hooks","useeffect-hook","usememo-hooks"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/simabthesailoruse-what-changed-demo-q94rn","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/simbathesailor.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2019-11-16T13:30:58.000Z","updated_at":"2025-03-18T07:48:51.000Z","dependencies_parsed_at":"2023-02-03T03:01:55.770Z","dependency_job_id":null,"html_url":"https://github.com/simbathesailor/use-what-changed","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-what-changed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-what-changed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-what-changed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbathesailor%2Fuse-what-changed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simbathesailor","download_url":"https://codeload.github.com/simbathesailor/use-what-changed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"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":["debugging","hacktoberfest","react-hooks","react-native","reactjs","usecallback-hooks","useeffect-hook","usememo-hooks"],"created_at":"2024-11-09T21:23:23.361Z","updated_at":"2025-05-15T13:08:25.507Z","avatar_url":"https://github.com/simbathesailor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-what-changed\n\n\u003ch2  align=\"center\"\u003eA tool and utility to debug major React hooks\u003c/h2\u003e\n\u003ch3 align=\"center\"\u003eBetter than console logs and debugger\u003c/h3\u003e\n\u003ch3 align=\"center\"\u003eDon't believe. Try \u003ca href=\"https://codesandbox.io/s/simabthesailoruse-what-changed-demo-q94rn?file=/src/index.js\" target=\"_blank\"\u003ethis codesandbox\u003c/a\u003e\u003c/h3\u003e\n\u003ch3 align=\"center\"\u003eReact | React native | React with Electron \u003c/h3\u003e\n\n\u003cp  align=\"center\"\u003e\n\n\u003cimg  src=\"https://badgen.net/npm/v/@simbathesailor/use-what-changed\"\u003e\n\n\u003cimg  src=\"https://badgen.net/bundlephobia/minzip/@simbathesailor/use-what-changed\"\u003e\n\n\u003cimg  src=\"https://badgen.net/npm/dw/@simbathesailor/use-what-changed\"\u003e\n\n\u003c/p\u003e\n\n\u003cp  align=\"center\"\u003e\u003cimg  src=\"demoimages/cover.png\"  width=\"500\"  align=\"center\"\u003e\u003c/p\u003e\n\n---\n\n## Debug following hooks\n\n**useEffect** | **useCallback** | **useMemo** | **useLayoutEffect** | **Custom hooks using core hooks**\n\n## Working Example\n\nOpen the codesandbox link and see the console.\nYou can uncomment the other hooks, and see the console accordingly, when the value changes across rerenders.\n\n[codesandbox use-what-changed example](https://codesandbox.io/s/simabthesailoruse-what-changed-demo-q94rn?file=/src/index.js)\n\n## Install\n\nIf you use yarn. Run\n\n```sh\n\nyarn add @simbathesailor/use-what-changed --dev\n\n```\n\nIf you use npm. Run\n\n```\n\nnpm i @simbathesailor/use-what-changed --save-dev\n\n```\n\n## Motivation\n\nI have been working on hooks for quite a long time. I use react hooks every day in my open source projects and also at work.\n\nNow, using useEffect, useCallback, useMemo have really helped me compose the logic well together. But when the dependency list gets long. When I say long , it can be any thing greater than 3 for me and can be more or less for others.\n\nWith these large dependency array, I found it really difficult to debug and find out what is causing my useEffect to run again( same for useCallback and useMemo). I know two strategies to debug:\n\n1. Break the useEffect logic into multiple useEffect. It is still fine, but expertise and time constraints will be there. People will not break the useEffect logic into smaller pieces first, they will try to spend time using logging the values and adding debugger so that not to change the production code.\n\n2) Make use of usePrevious hook which can be defined something like this\n\n```jsx\nimport React from 'react';\n\nfunction usePrevious(value) {\n  const ref = React.useRef(value);\n\n  React.useEffect(() =\u003e {\n    ref.current = value;\n  });\n\n  return ref.current;\n}\n\nexport default usePrevious;\n```\n\nAnd can be consumed like this:\n\n```jsx\nconst previousA = usePrevious(a);\n\nconst previousB = usePrevious(b);\n\nconst previousC = usePrevious(c);\n\nuseEffect(() =\u003e {\n  if (previousA !== a) {\n    console.log(`a has changed from ${previousA} to ${a}`);\n  }\n\n  if (previousB !== b) {\n    console.log(`a has changed from ${previousB} to ${b}`);\n  }\n\n  if (previousC !== c) {\n    console.log(`a has changed from ${previousC} to ${c}`);\n  }\n}, [a, b, c]);\n```\n\nHowever we can do it , it quite too much of work every time you run in the issue , where useEffect callback is running unexpectedly.\n\n1. You are coming to an unknown code base, This plugin can really enhance your developer experience when working with hooks. It can give you a strong confidence while you make changes to existing hooks.\n\nEven if you are coming to your own code after days. It becomes very difficult to wrap you head around various multiple hooks . This library with babel plugin helps you to undersrtand it wiothout severe cognitive thinking\n\n1. It can help beginners to learn react hooks easily. The beginners can reason about their changes easily and also avoid unintended runs of hooks. Hopefully this hook can save a lot of frustation for newcomers.\n\nTo solve all the above problems, I tried to create something which can enhance developer experience. Let's see how I tried to solve the problem.\n\n## Usage with babel plugin (Recommended)\n\nThe package can also be used with a babel plugin which make it more easy to debug.\n\n1. Run\n\n```\nnpm i @simbathesailor/use-what-changed --save-dev\n```\n\n2. Run\n\n```\nnpm i @simbathesailor/babel-plugin-use-what-changed --save-dev\n```\n\nAdd the plugin entry to your babel configurations\n\n```js\n{\n  \"plugins\": [\n    [\n      \"@simbathesailor/babel-plugin-use-what-changed\",\n      {\n        \"active\": process.env.NODE_ENV === \"development\" // boolean\n      }\n    ]\n  ]\n}\n```\n\n**Make sure the comments are enabled for your development build. As the plugin is solely dependent on the comments.**\n\nNow to debug a useEffect, useMemo or useCallback. You can do something like this:\n\n#### Debug individual hooks\n\n```jsx\n// uwc-debug\nReact.useEffect(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a, b, c, d]);\n\n// uwc-debug\nconst d = React.useCallback(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a, b, d]);\n\n// uwc-debug\nconst d = React.useMemo(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a]);\n\n// uwc-debug\nconst d = React.useLayoutEffect(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a]);\n```\n\nNotice the comments `uwc-debug` in above examples. The comment `uwc-debug` is responsible for the all the magic.\n\n#### Debug complete file or line below it.\n\nNotice the comments `uwc-debug-below` below examples.\n\n```jsx\nReact.useEffect(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a, b, c, d]);\n\n// this comment enables tracking all the hooks below this line. so in this case useCallback and useMemo will be tracked.\n// uwc-debug-below\nconst d = React.useCallback(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a, b, d]);\n\nconst d = React.useMemo(() =\u003e {\n  // console.log(\"some thing changed , need to figure out\")\n}, [a]);\n```\n\nSo the example will debug all the hooks below line containing // uwc-debug-below.\n\nNo need to add any import for use-what-changed. just add a comment **uwc-debug** or **uwc-debug-below** above your hooks and you should start seeing use-what-changed debug consoles. No more back and forth across files and browser, adding debuggers and consoles.\n\nThis plugin provides following information :\n\n**1.** Hook name which it is debugging.\n\n**2.** File name where hook is written\n\n**3.** Name of dependencies passed to hook.\n\n**4.** what has changed in dependency array which caused the re-run of hook with symbol icons ( ✅, ⏺).\n\n**5.** Tells you old value and new value of all the dependencies.\n\n**6.** Tells you whether it is a first run or an update. I found it very helpful in debugging cases.\n\n**7.** Unique color coding and id for individual hooks for easy inspection\n\n\u003cstrong\u003eNote: Frankly speaking the whole package was built, cause I was facing problems with hooks and debugging it was eating up a lot of my time. Definitely using this custom hook with babel plugin have saved me a lot of time and also understand unknown edge cases while using hooks\u003c/strong\u003e\n\n---\n\n## Usage without babel plugin\n\n1. When only dependency are passed as the single argument\n\n```jsx\nimport {\n  useWhatChanged,\n  setUseWhatChange,\n} from '@simbathesailor/use-what-changed';\n\n// Only Once in your app you can set whether to enable hooks tracking or not.\n// In CRA(create-react-app) e.g. this can be done in src/index.js\n\nsetUseWhatChange(process.env.NODE_ENV === 'development');\n\n// This way the tracking will only happen in devlopment mode and will not\n// happen in non-devlopment mode\n\nfunction App() {\n  const [a, setA] = React.useState(0);\n\n  const [b, setB] = React.useState(0);\n\n  const [c, setC] = React.useState(0);\n\n  const [d, setD] = React.useState(0);\n\n  // Just place the useWhatChanged hook call with dependency before your\n\n  // useEffect, useCallback or useMemo\n\n  useWhatChanged([a, b, c, d]); // debugs the below useEffect\n\n  React.useEffect(() =\u003e {\n    // console.log(\"some thing changed , need to figure out\")\n  }, [a, b, c, d]);\n\n  return \u003cdiv className=\"container\"\u003eYour app jsx\u003c/div\u003e;\n}\n```\n\n\u003cp  align=\"center\"\u003e\u003cimg  src=\"demoimages/indexonly.png\"  width=\"500\"  align=\"center\"\u003e\u003c/p\u003e\n\nAbove snapshot show the console log when b and c has changed in the above code example.\n\n2. Pass two arguments to useWhatChanged which makes it possible for useWhatChanged to log the names of the variables also.\n\n```jsx\nuseWhatChanged([a, b, c, d], 'a, b, c, d', 'anysuffix-string'); // debugs the below useEffect\n```\n\n\u003cp  align=\"center\"\u003e\u003cimg  src=\"demoimages/indexandname.png\"  width=\"500\"  align=\"center\"\u003e\u003c/p\u003e\n\n## Color coding\n\nA unique background color will be given to each title text. It helps us in recognising the specific effect when debugging. A unique id is also given to help the debugging further.\n\n\u003cp  align=\"center\"\u003e\u003cimg  src=\"demoimages/multipleeffectandcolorcoding.png\"  width=\"500\"  align=\"center\"\u003e\u003c/p\u003e\n\n## Demo link\n\n[Demo link](https://ozj1e.csb.app/)\n\n[Codesandbox link](https://codesandbox.io/s/cranky-tree-ozj1e)\n\n[Medium article link](https://medium.com/@anilchaudhary453/debug-your-reactjs-hooks-with-ease-159691843c3a)\n\n## Electron example\n\nAs this lbrary is just javascript and react. It can be used whereever\nReactjs exists.\n\nI have included the setup for elctron app with a repo example.\n\nTodos: Need to add an example for react-native, which is work in progress. I will update it in a couple of days.\n\n\u003cp  align=\"center\"\u003e\u003cimg  src=\"demoimages/electron_example.png\"  width=\"500\"  align=\"center\"\u003e\u003c/p\u003e\n\n[Electron repo link](https://github.com/simbathesailor/electron-learner)\n\n## Nextjs Example\n\n[Nextjs Example](https://github.com/simbathesailor/nextjs-uwc)\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).\n\n## Authors\n\n[simbathesailor](https://github.com/simbathesailor)\n\nSee also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd  align=\"center\"\u003e\u003ca  href=\"https://github.com/simbathesailor\"\u003e\u003cimg  src=\"https://avatars2.githubusercontent.com/u/5938110?s=400\u0026u=f94d3ad624faa17c799d7bbd88cf2d2170b26813\u0026v=4\"  width=\"100px;\"  alt=\"Anil kumar chaudhary\"/\u003e\u003cbr  /\u003e\u003csub\u003e\u003cb\u003eAnil kumar Chaudhary\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr  /\u003e\u003ca  href=\"https://github.com/simbathesailor/use-what-changed/commits?author=simbathesailor\"  title=\"Code\"\u003e💻\u003c/a\u003e  \u003ca  href=\"#ideas-simbathesailor\"  title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e  \u003ca  href=\"#design-simbathesailor\"  title=\"Design\"\u003e🎨\u003c/a\u003e  \u003ca  href=\"https://github.com/simbathesailor/use-what-changed/commits?author=simbathesailor\"  title=\"Documentation\"\u003e📖\u003c/a\u003e  \u003ca  href=\"https://github.com/simbathesailor/use-what-changed/issues/created_by/simbathesailor\"  title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimbathesailor%2Fuse-what-changed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimbathesailor%2Fuse-what-changed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimbathesailor%2Fuse-what-changed/lists"}