🚨 use-dependency-alert

React hook for debugging hook dependency arrays to validate what is changing, and how often. Not intended to be included in the final production build, but handy to use while debugging and confirming hooks are being triggered/rerendered when expected.

Install

Via npm

npm install use-dependency-alert

Via Yarn

yarn add use-dependency-alert

How to use

import { useEffect } from 'react'
import useDepedencyAlert from 'use-dependency-alert'

const TestComponent = ({ changingProp }) => {
  useEffect(() => {
    // This should not be changing often, but useDependencyAlert will let us know if that’s the case
  }, useDependencyAlert([changingProp]))

  return <div>{changingProp}</div>
}

With Options

import { useEffect } from 'react'
import useDepedencyAlert from 'use-dependency-alert'

const TestComponent = ({ changingProp }) => {
  useEffect(() => {
    // This should not be changing often, but useDependencyAlert will let us know if that’s the case
  }, useDependencyAlert(
    [changingProp],
    {
      context: 'TestComponent',
      dependencyKeys: ['changingProps'],
      logDelay: 5000,
    },
  ))

  return <div>{changingProp}</div>
}

Options

• context: string - Basic string for making alerts unique to help differentiate from others.
• dependencyKeys: string[] - Array of names to apply to depedency indexes in the array. Intended to streamline debugging.
• logDelay: number - Milliseconds used to delay the logging of depedency updates to help keep the noise down in the console.

License

MIT © Ryan Hefner