React State Logger

A lightweight debugging utility for React to log:

• 🟢 State changes
• 🔁 Component re-renders
• 🔍 Prop updates

Get structured logs instead of scattered console.log calls.

🚀 Installation

npm install react-state-logger

📦 Usage

Log State Changes

import { useStateTracker } from "react-state-logger"

const [count, setCount] = useStateTracker(0, "count")

Log Component Renders

import { useRenderTracker } from "react-state-logger"

useRenderTracker("App")

Log Prop Changes

import { useWhyDidYouUpdate } from "react-state-logger"

function Child({ value }) {
  useWhyDidYouUpdate("Child", { value })

  return <div>{value}</div>
}

🧪 Example

import {
  useStateTracker,
  useRenderTracker,
  useWhyDidYouUpdate
} from "react-state-logger"

function Child({ value }) {
  useWhyDidYouUpdate("Child", { value })
  return <div>{value}</div>
}

function App() {
  const [count, setCount] = useStateTracker(0, "count")

  useRenderTracker("App")

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>

      <Child value={count} />
    </div>
  )
}

🧠 Why Use This?

Instead of:

console.log(state)

You get:

• previous vs next values
• render counts
• prop differences
• structured logs

⚠️ Notes

• Works only in development mode
• Uses shallow comparison

📄 License

MIT