Zero-dependency profiler with micro-kernel architecture. Track renders, detect wasted updates, and ship faster React apps.
import { ReactScopeProvider, useScope } from '@oxog/reactscope'
function App() {
return (
<ReactScopeProvider>
<Dashboard />
</ReactScopeProvider>
)
}
function Dashboard() {
const scope = useScope('Dashboard')
return (
<div>
<p>Renders: {scope.renderCount}</p>
<p>Avg: {scope.averageRenderTime.toFixed(2)}ms</p>
<p>Wasted: {scope.wastedRenders}</p>
</div>
)
}
Powerful features to profile, analyze, and optimize your React applications.
Track every component render with precise timing, phase detection, and historical data.
Automatically identify unnecessary re-renders when props and state haven't changed.
Deep comparison between renders to identify which props cause updates.
Track heap usage over time and detect potential memory leaks in your app.
Link network requests to component renders to understand data flow.
Micro-kernel design lets you extend functionality with custom plugins.
Ready-to-use plugins for common profiling needs. Mix and match as needed.
Start profiling your React app in minutes. Zero config required.