updated readme to discuss react scan

README.md

@@ -59,6 +59,42 @@ If you encounter any issues with nightly builds, please report them in our [issu
 ## Development & Building
 You'll need to download the package manager used with this repo. You can install it by visiting [Bun.sh](https://bun.sh/) and following the installation instructions. 
 
+### Debugging 
+
+#### Debugging with React Scan
+Meshtastic Web Client has included the library [React Scan](https://github.com/aidenybai/react-scan) to help you identify and resolve render performance issues during development.
+
+React's comparison-by-reference approach to props makes it easy to inadvertently cause unnecessary re-renders, especially with:
+
+- Inline function callbacks (`onClick={() => handleClick()}`)
+- Object literals (`style={{ color: "purple" }}`)
+- Array literals (`items={[1, 2, 3]}`)
+
+These are recreated on every render, causing child components to re-render even when nothing has actually changed.
+
+Unlike React DevTools, React Scan specifically focuses on performance optimization by:
+
+- Clearly distinguishing between necessary and unnecessary renders
+- Providing render counts for components
+- Highlighting slow-rendering components
+- Offering a dedicated performance debugging experience
+
+#### Usage
+When experiencing slow renders, run:
+
+```bash
+bun run dev:scan
+```
+
+This will allow you to discover the following about your components and pages:
+
+- Components with excessive re-renders
+- Performance bottlenecks in the render tree
+- Expensive hook operations
+- Props that change reference on every render
+
+Use these insights to apply targeted optimizations like `React.memo()`, `useCallback()`, or `useMemo()` where they'll have the most impact.
+
 ### Building and Packaging
 
 Build the project:

package.json

@@ -11,7 +11,7 @@
     "check:fix": "pnpm check --write src/",
     "format": "biome format --write src/",
     "dev": "vite dev --open",
-    "dev:debug": "VITE_DEBUG=true vite dev",
+    "dev:scan": "VITE_DEBUG_SCAN=true vite dev",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",

src/index.tsx

@@ -8,7 +8,8 @@ import { createRoot } from "react-dom/client";
 import { App } from "@app/App.tsx";
 
 // run react scan tool in development mode only
-import.meta.env.VITE_DEBUG &&
+// react scan must be the first import and the first line in this file in order to work properly
+import.meta.env.VITE_DEBUG_SCAN &&
   scan({
     enabled: true,
   });