https://github.com/kyleshevlin/use-debugger-hooks
A small package of custom React hooks that are useful for debugging changes in React hook dependencies across renders
https://github.com/kyleshevlin/use-debugger-hooks
debugging hooks react
Last synced: about 1 year ago
JSON representation
A small package of custom React hooks that are useful for debugging changes in React hook dependencies across renders
- Host: GitHub
- URL: https://github.com/kyleshevlin/use-debugger-hooks
- Owner: kyleshevlin
- License: mit
- Created: 2021-08-19T16:30:13.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-26T06:11:27.000Z (about 4 years ago)
- Last Synced: 2025-03-28T08:41:32.650Z (over 1 year ago)
- Topics: debugging, hooks, react
- Language: TypeScript
- Homepage: https://kyleshevlin.com/helpful-debugging-hooks
- Size: 170 KB
- Stars: 90
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-debugger-hooks
This 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.
- `useLogChanges`
- `useCallbackDebugger`
- `useEffectDebugger`
- `useLayoutEffectDebugger`
- `useMemoDebugger`
## Installation
```
npm install use-debugger-hooks
```
## Usage
Most 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.
`useLogChanges` will track a value across renders, logging out any changes that occur.
```jsx
function Parent(props) {
useLogChanges(props);
return ;
}
```
Any time that `Parent` rerenders, any changes to `props` will be logged to the console.
The 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.
Say 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.
```javascript
// Problematic effect
useEffect(() => {
someEffectWithDeps(dep1, dep2, dep3);
}, [dep1, dep2, dep3]);
// Add debugging to log out dependency changes
import { useEffectDebugger } from 'use-debugger-hooks';
useEffectDebugger(() => {
someEffectWithDeps(dep1, dep2, dep3);
}, [dep1, dep2, dep3]);
```
Now you'll be able to see which dependency is changing too often and be able to fix the problem.