React Component that Tracks Mount and Rerender.
npm install @tresorama/react-dev-track-rerenderReact Component that Tracks Mount and Rerender.
When used shows the mount and rerender life-cycle in the UI by showing two visual indicator:
- mount -> "yellow"
- rerender -> "blue"
Install the package:
``bashpnpm
pnpm add @tresorama/react-dev-track-rerender
Add the global provider to your app and set
to true (default is false):`tsx
import { DevTrackReRenderGlobalProvider } from '@tresorama/react-dev-track-rerender';
>
`
then use the
component in your components:`tsx
import { DevTrackReRender } from '@tresorama/react-dev-track-rerender';
hello
world
`Good to Know
$3
The
component doesn't create a new DOM element as a wrapper, it uses radix Slot component to add props directly to the first child.
Because of this ensure that the wrapped component (div in the example) will add unknown props to the first child.`tsx
hello
// ✅ correct
const MyButton = ({ children,...props }: React.ComponentProps<'button'>) => (
)
// ❌ incorrect
const MyButton = ({ children }: { children: React.ReactNode; }) => (
)
`$3
You must explicitly render the
once at the root of your app and pass isEnabled to true.
Default is false.
When false the DevTrackRerender component will render the children directly.Limitations
$3
If
React.StrictMode is enabled, you cannot see the monut event in the UI.
In order to see the mount event, disable React.StrictMode` in your app while debugging rerenders, then re-enable it when you are done.