# 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. ## 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](./perf-monitor). ## What's Next - [Image Overlay](./image-overlay) — Overlay design mockups on your running app - [Environment Inspector](./env) — View and search environment variables - [Network Monitor](./network) — 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](../web/installation#tool-setup) 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](../web/angular). ### 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](../web/solid#highlight).