A pattern for outputting debug from a custom react hook

useCustomHookDebugPattern.js

import { useEffect, useState } from "react";

export function useCustomHookDebugPattern(arg1, arg2, arg3, message, something, setSomething) {
  // Watch for loop progress
  const [count, setCount] = useState(1);

  // Additional local state
  const [prevMessageId, setPreviousMessageId] = useState(undefined);
  useEffect(() => {
    // Increment hook count
    setCount(count => count + 1);
    // Set any additional local state
    setPreviousMessageId(message.msgId);
    // Clearly indicate hook name and number of times run
    console.log('--------------useCustomHookDebugPattern--------------');
    console.log(count);
    // Output any relavent additional local state
    console.log(prevMessageId);
    console.log(message);
    
    // Carefully condition a key state setter
    if (arg1 !== undefined) {
      if (arg1 === arg2.id && arg3.length === 0) {
        setSomething(something => [...something, message]);
      } else if (prevMessageId !== message.msgId arg3.length > 0) {
        setSomething(something => [...something, message]);
      }
    }
  }, [message]);
}