Function useSyncWindowSize

A custom hook that returns the current window size (width and height).

This hook uses useSyncExternalStore hook to ensure that components re-render synchronously with the latest window size, preventing Tearing issues during window resize events. The width and height values are always up-to-date and consistent across renders.

const { width, height } = useSyncWindowSize();
console.log('window size:', { width, height });

The width and height are updated on window resize events. The initial values are set when the component first mounts.