Highlight Updates | BUOY Docs

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—mount, state change, prop change, or parent re-render.

Visual Component Hierarchy

See nested components highlighted with visual overlays. The toolbar at the bottom lets you control tracking.

Render Causes

Mount

First render of the component

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

Image Overlay — Overlay design mockups on your running app
Environment Inspector — View and search environment variables
Network Monitor — See every API call your app makes