Paradigm Demo

Standard Hook Call (Not Wrapped)

In this page, hooks are called directly in the body of the main component. Notice how any interaction below immediately triggers a full parent component re-render.

Click on

buttons to see the difference on rerenders.

Parent Component Render HUD

Every action triggers a full re-render of this page component.

total rerenders:0

1. Stateful Counters

Clicking these buttons updates local state, causing the entire page to re-render.

step: 10Render Count: 1

step: 5Render Count: 1

2. Window Event Listener

Resizing the browser window triggers event listeners that update the screen state, re-rendering the whole page on every pixel change.

Current Width

Desktop 💻Render Count: 1