It doesn't work reactively in react version 18 or higher.

[ynifamily3]

When I build the react app above v18,

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

It doesn't reactive on resize.

export const useScreenSize = () => {
  const mobile = useMediaQuery({
    maxDeviceWidth: 767,
  });
  const tablet = useMediaQuery({
    minDeviceWidth: 768,
    maxDeviceWidth: 1439,
  });
  const pc = useMediaQuery({
    minDeviceWidth: 1440,
  });
  return useMemo(() => ({mobile, tablet, pc}), [mobile, tablet, pc]);
};

[WhiteYaksha]

Same here, the state doesn't change when resizing

EDIT: For anyone having issues because of React 18, you can try to use ahooks which has a built in hook for responsive

https://ahooks.js.org/hooks/use-responsive/

[yocontra]

Fixed and published as beta7! Will probably release 9.0.0 as stable if everyone reports that it works fine for them.