useMedia flashes wrong state

`defaultMatches` bleeds through the initial render resulting in flashes of wrong state. replacing `useEffect` with `useLayoutEffect` would fix this but would require a workaround for server-side rendering

alternatively something like this could work

```js
const mediaQueryList = useRef()
const getMediaQueryList = () => window.matchMedia(
typeof query === 'string' ? query : json2mq(query)
);
let initialMatches;
if (typeof window !== 'undefined') {
mediaQueryList.current = getMediaQueryList();
initialMatches = mediaQueryList.current.matches;
}

initialMatches = typeof initialMatches !== 'undefined' ? initialMatches : defaultMatches;
const [matches, setMatches] = useState(initialMatches);

useEffect(
() => {
mediaQueryList.current = mediaQueryList.current || getMediaQueryList()
// the rest of the method
},
[query]
)
```

what do you think?

Start at the useMedia hook entry point and reproduce an initial render with defaultMatches to observe the flash. Check the useEffect setup, matchMedia access, and server-side rendering path; done means the initial client state reflects the media query without breaking SSR.

Written by the indexing model from the issue text.