{"id":17344514,"url":"https://github.com/kyleshevlin/use-debugger-hooks","last_synced_at":"2025-04-14T20:24:05.191Z","repository":{"id":39756184,"uuid":"398007765","full_name":"kyleshevlin/use-debugger-hooks","owner":"kyleshevlin","description":"A small package of custom React hooks that are useful for debugging changes in React hook dependencies across renders","archived":false,"fork":false,"pushed_at":"2022-05-26T06:11:27.000Z","size":174,"stargazers_count":90,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T08:41:32.650Z","etag":null,"topics":["debugging","hooks","react"],"latest_commit_sha":null,"homepage":"https://kyleshevlin.com/helpful-debugging-hooks","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/kyleshevlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-19T16:30:13.000Z","updated_at":"2024-11-13T07:21:48.000Z","dependencies_parsed_at":"2022-08-28T03:02:46.962Z","dependency_job_id":null,"html_url":"https://github.com/kyleshevlin/use-debugger-hooks","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyleshevlin%2Fuse-debugger-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyleshevlin%2Fuse-debugger-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyleshevlin%2Fuse-debugger-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyleshevlin%2Fuse-debugger-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyleshevlin","download_url":"https://codeload.github.com/kyleshevlin/use-debugger-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248953395,"owners_count":21188633,"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","hooks","react"],"created_at":"2024-10-15T16:25:30.116Z","updated_at":"2025-04-14T20:24:05.155Z","avatar_url":"https://github.com/kyleshevlin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-debugger-hooks\n\nThis is a package of custom React hooks that are useful for debugging dependency changes between renders. Most act as drop in replacements for their React hook counterpart. The available hooks include.\n\n- `useLogChanges`\n- `useCallbackDebugger`\n- `useEffectDebugger`\n- `useLayoutEffectDebugger`\n- `useMemoDebugger`\n\n## Installation\n\n```\nnpm install use-debugger-hooks\n```\n\n## Usage\n\nMost of these hooks are drop in replacements for their React hook counterpart. They have the same API, but make use of `useLogChanges` under the hood to log out changes to your browser's console.\n\n`useLogChanges` will track a value across renders, logging out any changes that occur.\n\n```jsx\nfunction Parent(props) {\n  useLogChanges(props);\n\n  return \u003cChild {...props} /\u003e;\n}\n```\n\nAny time that `Parent` rerenders, any changes to `props` will be logged to the console.\n\nThe other hooks in this library use `useLogChanges` to track values in the `dependencies` array. If a dependency changes across renders, it will be logged out to the console.\n\nSay you have a `useEffect` hook running more often than you expect and you want to see which dependency is causing that to happen. Replace `useEffect` with `useEffectDebugger` and then see the changes in the browser's console.\n\n```javascript\n// Problematic effect\nuseEffect(() =\u003e {\n  someEffectWithDeps(dep1, dep2, dep3);\n}, [dep1, dep2, dep3]);\n\n// Add debugging to log out dependency changes\nimport { useEffectDebugger } from 'use-debugger-hooks';\n\nuseEffectDebugger(() =\u003e {\n  someEffectWithDeps(dep1, dep2, dep3);\n}, [dep1, dep2, dep3]);\n```\n\nNow you'll be able to see which dependency is changing too often and be able to fix the problem.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyleshevlin%2Fuse-debugger-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyleshevlin%2Fuse-debugger-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyleshevlin%2Fuse-debugger-hooks/lists"}