Lightweight React hooks to debug and understand re-renders
npm install @devloom/react-performance> Lightweight, production-safe React hooks to understand, debug, and control re-renders — without blind optimization.
---
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.”
---
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.
---
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.
---
``bash`
npm install devloom-react-performance
Peer dependency:
- React (hooks support)
You can also use yarn or pnpm:
`bash`
yarn add @devloom/react-performance
pnpm add @devloom/react-performance
Import the hooks you need from the package and use them directly in your components:
`tsx
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 (
- React (hooks support)---
🔧 Available Hooks
$3
Track how many times a component renders.
`ts
const renderCount = useRenderCount();
console.log(renderCount);
`Why it matters
- Verifies whether
is working
- Detects unnecessary re-renders early
- Helps validate refactors---
$3
Logs exactly which props changed and caused a re-render.
`ts
useWhyDidYouUpdate('UserCard', props);
`Example output:
txt
[devloom] UserCard re-rendered due to:
{ isActive: [false, true], theme: ['light', 'dark'] }
`🔒 Dev-only: Logs automatically disabled in production.
---
$3
Provides a stable function reference without dependency-array complexity.
ts
const onClick = useStableCallback(() => {
submitForm();
});
`Why it matters
- Prevents unnecessary child re-renders
- Avoids overuse of
- Keeps logic fresh while reference stays stable---
$3
Runs an effect only when dependencies deeply change.
ts
useDeepCompareEffect(() => {
fetchData(filters);
}, [filters]);
``---
- No React patching
- No global side effects
- No runtime cost in production for logging hooks
- Hooks are opt-in and local to components
---
- Debugging unnecessary re-renders
- Verifying memoization effectiveness
- Refactoring performance-sensitive components
- Teaching performance concepts to teams
---
- Not a replacement for React DevTools
- Not a performance silver bullet
- Not a profiling framework
---
MIT
---
> Juniors optimize by habit.
> Seniors optimize by measurement.