Socket
Socket
Sign inDemoInstall

use-debugger-hooks

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-debugger-hooks


Version published
Maintainers
1
Created

Readme

Source

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.

function Parent(props) {
  useLogChanges(props);

  return <Child {...props} />;
}

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.

// 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.

FAQs

Last updated on 29 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc