Highlight Updates

See which components render as you interact with a development build. The overlay shows render counts; the detail view shows available causes and hook value changes.

Your search stays in view when you leave a render.

Names use displayName when the app sets it.

Use the demo to inspect a list update, then compare it with an interaction in your app.

← PrevNext →

Explore example render activity

1 / 6

The demo displays generated component updates for a mock Pokédex. Production data depends on supported development instrumentation and captured metadata.

9:41

Loading live demo…

‹›

Render Causes

Inspect the recorded cause alongside the component and interaction before deciding whether a render is unnecessary.

---

Installation

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

---

What You Can Do

---

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 It Can't Do

It needs a development build. Render data comes from React's own DevTools hook (__REACT_DEVTOOLS_GLOBAL_HOOK__), which release builds do not install. This tool requires the development hook.

The overlay costs frame time. Drawing a box and a counter over every committed component is real work on the UI thread, so the numbers tell you which component re-renders and why, not what your frame budget looks like with the overlay off. For that measurement use Bench.

What's Next

• Image Overlay — Overlay design mockups on your running app
• Environment Inspector — View and search environment variables
• Network Monitor — Inspect supported HTTP requests

---

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?

Buoy shows overlays and render details inside the running development build. Use React's profiler for profiling sessions and Buoy for inspecting renders during an interaction. Highlight Updates does not work in production builds.

Web support

Import @buoy-gg/core/web/register before React DOM to capture roots and renders. The buoy() Vite plugin adds it for you. The shared inspector measures DOM elements. Import it from the package's /web entry (7.0.41 or later). See Web installation for registration, dependencies, and browser boundaries.

Swift interaction support

Swift uses the highlight-updates adapter ID for native screen inspection and interaction. It does not track React renders. Inspect the connected device’s action list: native builds provide describeScreen, tapElement, waitFor, scroll, and typeText, plus startTouchCapture, stopTouchCapture, clearTouchCapture, and readTouchCapture for Scenarios recording.

Touch capture requires a development build. It excludes Buoy controls and secure text inputs, retains at most 500 interactions, and reports capture status and coverage problems through readTouchCapture. Stop capture when finished; clear it to remove retained records. A successful action dispatch does not prove a tap worked: check the returned tapped field and the resulting screen. Physical-touch capture remains pending device QA; MCP-driven capture and replay have been checked in the simulator.

Angular

Draw boxes and count views in Angular. Use a stable build: Angular 20, 21, or 22. See the setup steps.

Solid

Draw boxes around the parts that changed in Solid. It names the nearest component you wrote. It works in dev builds only. See the setup steps.