tools / highlight-updates

See every re-render — and exactly why it happened

Wasted re-renders are the most common React Native performance problem and the hardest to see. Buoy highlights components visually as they render, counts renders per component, and tells you the cause of each one — props, state, parent, or mount — so you fix the actual culprit instead of guessing at memo().

Read the docsnpm i @buoy-gg/highlight-updates

React Native render highlighting overlays — Component hierarchy highlighted live.

Render counts per component — Render-count badges expose hot components.

Render cause details — Why it rendered: props, state, or parent.

What it does

Visual overlays

Components flash on screen as they render, with the component hierarchy highlighted in place.

Render counts

Badges show how many times each component rendered — the 47x badge is your bug.

Render causes

Tap any component to see exactly why it rendered, and step through its render history.

On-device, any build

Runs inside the app — profile the janky screen on the actual device where it's janky.

Frequently asked questions

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.

Add Render Highlighter to your app

Free for on-device debugging. Two-minute install, no native code.

Quick startnpm i @buoy-gg/core

Works well with

Bench — Performance Monitor

@buoy-gg/perf-monitor

Events Timeline

@buoy-gg/events

React Query DevTools

@buoy-gg/react-query