@buoy-gg/highlight-updates

See exactly WHY your React Native components re-render — every render gets an overlay tagged with its cause: mount, state, props, or parent.

Part of Buoy — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from @buoy-gg/core.

Install

npm install @buoy-gg/core @buoy-gg/highlight-updates

Quick start

import { FloatingDevTools } from "@buoy-gg/core";

export default function App() {
  return (
    <>
      <YourApp />
      <FloatingDevTools />
    </>
  );
}

That's it — the Render Highlighter appears in the floating menu. It's a standalone implementation: no React DevTools connection, no Chrome tab, no Flipper required.

Prefer to drive it yourself?

import { HighlightUpdatesController } from "@buoy-gg/highlight-updates";

HighlightUpdatesController.toggle();

What you get

• Render overlays with the cause — every render flashes a bounding box tagged mount / state change / prop change / parent re-render. No more guessing why a component updated.
• Hook value tracking — when state caused the render, see the before → after values of the exact useState or useReducer that changed.
• Overlay mode — lightweight real-time highlights while you interact with the app; perfect for spotting unnecessary re-renders.
• Modal mode — full inspector with render history, filtering, and detailed per-render cause breakdowns for deep debugging sessions.
• Powers Bench's render capture — with @buoy-gg/perf-monitor installed, benchmark recordings capture per-component render counts and durations.
• Filters out the framework noise — you see your components, not View/Text internals.

Desktop & AI

The same live session streams to Buoy Desktop (free, macOS/Windows/Linux) and to Claude Code or Cursor via the Buoy MCP server.

Free vs Pro

Every tool is free. Pro unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.

📚 Full docs · All Buoy tools

Proprietary software. © Buoy LLC. Terms