Paradigm Demo
Wrapped (Hook Wrapper Component)
In this page, hooks are wrapped inside `wrap()` or `useHook()`. Notice that updating counters or resizing the browser window increments only that specific component's sub-renders. The parent page component render count remains at 1!
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 inside the wrapper component, keeping the parent page unaffected.
step: 10Render Count: 1
0
step: 5Render Count: 1
0
2. Window Event Listener
Resizing the browser window triggers events that update only the width sub-tree, avoiding full-page paint overhead.
Current Width
px
Desktop 💻Render Count: 1