updated readme to discuss react scan
This commit is contained in:
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user