Highlight Updates

+
UniversalWorks with Expo & React Native CLI

This tool works with both Expo and React Native CLI projects. Just install and go.

See exactly WHY your components re-render. Visual overlays show renders in real-time, and tapping any badge reveals the cause—state change, prop change, or parent re-render.

Don't take our word for it — this is the real tool, running right here on mock renders. The guided tour below walks one debugging story: typing in a search box re-renders every card in the list, the 47x badge names the worst offender, the detail view names the cause — down to the exact useState before → after. Or skip the tour and just start tapping:

Real component, live renders

1 / 6

Not a video — the shipped tool on mock data. Typing in the mock Pokédex re-renders components: a box flashes on each render, and counts climb teal → amber.

9:41
Loading live demo…
Mock renders, real component — the same code that renders in your app. Step through the tour, or just start tapping.

Render Causes

State

useState or useReducer changed

Props

Parent passed different props

Parent

Parent component re-rendered

Know the WHY — Every render is tagged with its cause. No more guessing why your component updated.


Installation

npm install @buoy-gg/highlight-updates

That's it. Highlight Updates appears in your FloatingDevTools menu.


What You Can Do

Visual Overlay

See renders in real-time

Cause Detection

Know WHY it rendered

Hook Values

See before/after state

History

Browse past renders

Filtering

Focus on specific components

Tap to Inspect

Tap any badge for details


Two Modes

Toggle between modes directly from the FloatingDevTools menu:

Overlay Mode — Quick visual overlay that shows renders as they happen. Perfect for spotting unnecessary re-renders while you interact with your app.

Modal Mode — Full inspector with render history, filtering, and detailed cause breakdowns. Great for deep debugging sessions.


Hook Value Tracking

When a state change causes a render, Highlight Updates shows you the before and after values of your hooks. See exactly which useState or useReducer value changed.


What's Next


FAQ

How do I find unnecessary re-renders in React Native?

Install @buoy-gg/highlight-updates and turn on highlighting — components flash as they render with counts and causes, so over-rendering components and the reason (props, state, parent) are visible immediately.

How is this different from the React DevTools profiler?

The profiler records a session for later analysis on a desktop. Buoy highlights renders live on the device while you use the app — and also works in staging/production builds where the profiler can't attach.