This is a utility to efficiently subscribe to window resize events. As components in your application interact with window size, they compound resize listeners which can be expensive to handle. To get around this, the useWindowInfo
hook reads context from the <WindowInfoProvider>
— which attaches only a single event listener to the window. These events are also piped through requestAnimationFrame
so they are already optimized for performance.
The window info utility also conveniently watches breakpoints for you. This enables you to write highly-performant js-based media queries, which can match your exact CSS media queries. This can be useful for conditionally rendering JSX or any other css-in-js needs.
requestAnimationFrame
Resize your window to see the effect:
{
"width": 1280,
"height": 720,
"--vw": "12.8px",
"--vh": "7.2px",
"breakpoints": {
"s": false,
"m": false,
"l": false,
"xl": true
},
"eventsFired": 1
}