Issue title: useLayoutEffect
 Issue body: I am using this hook for determining if a user is on a mobile or desktop device, and to conditionally expand or collapse a menu. I am using a `useLayoutEffect` hook for setting state based on the `useMedia` hook, but this hook uses `useEffect`, which causes another render and for the UI to flash into place on the second render, immediately after. I've tried switching the defaultState, but that just moves the problem to the other match case.

How do you feel about a second export that uses `useLayoutEffect` so consumers can choose which type of effect they would like to use?
 Comments: 
 Comment 0: I'm more than happy to submit a PR with a `useMediaLayout` (or something similar) named export that uses `useLayoutEffect` if that seems okay.
 Comment 1: Does it make sense to only have `useLayoutEffect`? Or are there cases where `useEffect` if preferable for this hook?
 Comment 2: > ... if that seems okay.

That would be great, I'm just thinking if we can just replace `useEffect` with `useLayoutEffect`.
 Comment 3: There are probably cases for both. For my uses, I feel like I would only use a layout effect, but there are a ton of media queries, I doubt all need to be run synchronously.
 Comment 4: OK, then we can create `useMediaLayout`.
 Comment 5: Maybe something like this:

```js
const useMedia = createUseMedia(useEffect);
const useMediaLayout = createUseMedia(useLayoutEffect);
```
 Comment 6: Oh yeah, nice! I'll give that a go and submit a PR.
 Comment 7: Thanks for adding this, it should be in `1.3.0` now.
{'source': 'GithubIssues', 'repo_name_with_owner': 'streamich/use-media', 'issue_id': 420584805, 'repo_stars': 511.0}