devloom-react-performance

Lightweight, production-safe React hooks to understand, debug, and control re-renders — without blind optimization.

🚩 The Real Problem

Most React performance issues are not caused by slow code.

They are caused by:

• Unexpected re-renders
• Unstable props and callbacks
• Overuse of useMemo / useCallback without evidence
• Debugging performance after users complain

Teams often ask:

“Why is this component re-rendering again?”

And the honest answer is usually:

“We don’t know.”

🎯 Why this package exists

React gives us powerful tools, but limited visibility at code level.

• React DevTools Profiler is powerful but manual and visual
• Heavy libraries like why-did-you-render are intrusive and complex
• Blog snippets are inconsistent and unmaintained

devloom-react-performance fills the gap:

Small, composable hooks that make React performance observable inside your code, where decisions are made.

🧠 Philosophy

This package is built on three principles:

1. Measure before optimizing
2. Make re-renders explicit
3. Keep performance tools lightweight and opt-in

This is not a magic performance fix.
It is a diagnostic and learning toolkit.

📦 Installation

npm install devloom-react-performance

Peer dependency:

• React >=16.8 (hooks support)

You can also use yarn or pnpm:

yarn add @devloom/react-performance
pnpm add @devloom/react-performance

⚡ Quick start

Import the hooks you need from the package and use them directly in your components:

import React from 'react';
import {
  useRenderCount,
  useWhyDidYouUpdate,
  useStableCallback,
  useDeepCompareEffect,
} from '@devloom/react-performance';

function UserCard(props: { name: string; isActive: boolean }) {
  const renders = useRenderCount();

  useWhyDidYouUpdate('UserCard', props);

  const onClick = useStableCallback(() => {
    console.log('clicked', props.name);
  });

  useDeepCompareEffect(() => {
    // runs only when complex dependencies deeply change
  }, [props]);

  return (
    <div>
      <div>{props.name}</div>
      <div>renders: {renders}</div>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

• React >=16.8 (hooks support)

🔧 Available Hooks

1️⃣ useRenderCount

Track how many times a component renders.

const renderCount = useRenderCount();
console.log(renderCount);

Why it matters

• Verifies whether React.memo is working
• Detects unnecessary re-renders early
• Helps validate refactors

2️⃣ useWhyDidYouUpdate

Logs exactly which props changed and caused a re-render.

useWhyDidYouUpdate('UserCard', props);

Example output:

[devloom] UserCard re-rendered due to:
{ isActive: [false, true], theme: ['light', 'dark'] }

🔒 Dev-only: Logs automatically disabled in production.

3️⃣ useStableCallback

Provides a stable function reference without dependency-array complexity.

const onClick = useStableCallback(() => {
  submitForm();
});

Why it matters

• Prevents unnecessary child re-renders
• Avoids overuse of useCallback
• Keeps logic fresh while reference stays stable

4️⃣ useDeepCompareEffect

Runs an effect only when dependencies deeply change.

useDeepCompareEffect(() => {
  fetchData(filters);
}, [filters]);

🧪 Production Safety

• No React patching
• No global side effects
• No runtime cost in production for logging hooks
• Hooks are opt-in and local to components

🧭 When should you use this?

• Debugging unnecessary re-renders
• Verifying memoization effectiveness
• Refactoring performance-sensitive components
• Teaching performance concepts to teams

🚫 What this package is NOT

• Not a replacement for React DevTools
• Not a performance silver bullet
• Not a profiling framework

📜 License

MIT

Juniors optimize by habit.
Seniors optimize by measurement.