React Logger

A React hook that helps developers identify and debug render issues by tracking dependency changes and providing specific information about what changed between renders.

Features

• Dependency tracking - Detects changes between renders
• Floating UI panel - Interface with search and filtering
• Search - Filter by label, ID, timestamp, and dependency values
• Entry counters - Shows total and filtered entries
• Copy functionality - Copy log entries to clipboard
• Multiple instances - Track different dependency sets with unique IDs
• Persistent state - Maintains logs across component remounts
• SSR compatible - Safe for server-side rendering environments
• Fixed-width columns - Consistent layout for easier scanning

Installation

# Using npm
npm install @arthurgeron/react-logger

# Using yarn
yarn add @arthurgeron/react-logger

# Using pnpm
pnpm add @arthurgeron/react-logger

# Using bun
bun add @arthurgeron/react-logger

Basic Usage

import { useDependencyChangeLogger } from "@arthurgeron/react-logger";

function MyComponent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState(null);

  // Track dependency changes
  useDependencyChangeLogger([count, user], "MyComponent state");

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>Increment: {count}</button>
      <button onClick={() => setUser({ id: Date.now() })}>Update User</button>
    </div>
  );
}

API Reference

Hook Signature

useDependencyChangeLogger(
  dependencies: unknown[],
  label?: string
): void

Parameters

| Parameter | Type | Default | Description | | -------------- | ----------- | -------------------------- | -------------------------------------------------- | | dependencies | unknown[] | - | Array of values to track for changes | | label | string | "DependencyChangeLogger" | Human-readable identifier for this logger instance |

Returns

This hook returns void - it only provides side effects (console logging and UI panel updates).

UI Panel Features

The logger creates a floating UI panel when dependencies change. The panel includes:

Search & Filtering

• Text search: Filter by any text in labels or values
• ID search: Use ID:23, [ID:23], or just 23 to find specific instances
• Timestamp search: Filter by time patterns
• Value search: Search within previous/next dependency values

Panel Controls

• Search bar: Filter entries
• Counter: Shows filtered/total entries (e.g., "5/20")
• Copy button: Copy all shown entries to clipboard
• Expand button: View full dependency details
• Width toggle: Switch between normal and full-width modes
• Close button: Hide/show the logger panel

Column Layout

| Column | Description | Width | | --------------- | -------------------------------------- | --------------------------------- | | Timestamp | When the change occurred | Fixed-width | | Instance ID | Unique identifier for each hook usage | Fixed-width | | Label | Custom label provided to the hook | Flexible, max-width with ellipsis | | Changed Indices | Which dependencies changed (wrappable) | Fixed-width, centered |

Usage Examples

Basic State Tracking

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  useDependencyChangeLogger(
    [user, loading, userId],
    "UserProfile: user, loading, userId"
  );

  // Component logic...
}

Complex Object Tracking

function DataDashboard() {
  const { data, error, isLoading } = useApiCall();
  const processedData = useMemo(() => processData(data), [data]);

  useDependencyChangeLogger(
    [data, error, isLoading, processedData],
    "DataDashboard: API state and processed data"
  );

  // Component logic...
}

Multiple Hook Instances

function ComplexComponent() {
  // Track different concerns separately
  useDependencyChangeLogger([authUser, permissions, roles], "Auth state");

  useDependencyChangeLogger([apiData, apiError, isLoading], "API state");

  useDependencyChangeLogger([formData, formErrors, isValid], "Form state");

  // Each hook usage will have its own instance ID and entries
}

Advanced Filtering Examples

Search the logger panel with these patterns:

• "user" - Find all entries containing "user"
• "ID:15" - Find entries from instance #15
• "[ID:15]" - Alternative ID search format
• "23" - Find instance #23 or any entries containing "23"
• "7:30" - Find entries from 7:30 timestamp
• "loading" - Find entries where loading state changed

How It Works

The hook:

1. Tracks changes: Compares previous and current dependency arrays
2. Logs to console: Outputs change details with fsk prefix
3. Updates UI panel: Shows dependency changes (browser only)
4. Manages state: Uses global window state to persist across component remounts
5. Assigns IDs: Each hook usage gets a unique instance ID for identification

Console Output

When dependencies change, you'll see console warnings like:

fsk MyComponent state: dependencies changed at indices [0, 2]:
  [0]: prev = null, next = {"id": 123}
  [2]: prev = false, next = true

Global State Management

The hook uses global window state to:

• Persist logs across component remounts
• Share state between multiple hook instances
• Maintain search terms and UI preferences
• Track instance counters for unique IDs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup

1. Clone the repository
2. Install dependencies: bun install
3. Start development server: bun run dev
4. Make your changes and ensure tests pass: bun test
5. Submit a pull request

License

MIT + Commons