A type-safe React hook for debugging purposes that wraps around the useEffect hook, which returns the dependancies that changed on each iteration of the effect within the console.
npm install @dyljhd/use-effect-debuggeruse-effect-debugger
A type-safe React hook for debugging purposes that wraps around the useEffect hook, which returns the dependancies that changed on each iteration of the effect within the console.
npm i -D @dyljhd/use-effect-debugger
devDependancies and all usage removed from the codebase before pushing to a production environment.
effect: Accepts a function that contains imperative, possibly effectful code.
deps: The effect will only activate if the values in the list change.
debugOptions: A selection of options to customize debug output within the console.
consoleOutput: This changes the console output method for the changed deps in the console.
consoleName: This changes the debug label outputted with the changed deps in the console.
depNames: This gives each of the changed deps in the object a named key instead of defaulting to its index in the deps array.
effect: React.EffectCallback
deps: React.DependencyList
debugOptions
consoleOutput: "log" | "table" | undefined
consoleName: string | undefined
depNames: (string | null)[] | undefined
effect and deps are no different from useEffect arguments.
consoleName defaults to use-effect-debugger.
null within the depNames array if you would like to skip naming a particular key.
prev value will always be undefined.
consoleOutput of log outputs using console.log, and table outputs using console.table
tsx
function ExampleComponent() {
const [string, setString] = useState('0');
const [number, setNumber] = useState(0);
useEffectDebugger(
() => {
console.log('useEffect ran');
},
[string, number],
{
consoleName: 'USE-EFFECT-DEBUGGER',
depNames: [null, 'Number'],
}
);
function incrementString() {
setString((prev) => String(Number(prev) + 1));
}
function incrementNumber() {
setNumber((prev) => prev + 1);
}
function incrementAll() {
incrementString();
incrementNumber();
}
return (
<>
String: {string}
Number: {number}
);
}
`
$3
#### On mount:
`js
"USE-EFFECT-DEBUGGER" {
0: {
prev: undefined,
cur: "0"
},
Number: {
prev: undefined,
cur: 0
},
}
`
#### "Increment String" onClick event:
`js
"USE-EFFECT-DEBUGGER" {
0: {
prev: "0",
cur: "1"
}
}
`
#### "Increment Number" onClick event:
`js
"USE-EFFECT-DEBUGGER" {
Number: {
prev: 0,
cur: 1
}
}
`
#### "Increment All" onClick event:
`js
"USE-EFFECT-DEBUGGER" {
0: {
prev: "1",
cur: "2"
},
Number: {
prev: 1,
cur: 2
},
}
``