move useMedia hook here but without SSR warning

hooks/use-first-mount-state.ts

@@ -0,0 +1,13 @@
+import { useRef } from "react";
+
+export const useFirstMountState = (): boolean => {
+  const isFirstMount = useRef(true);
+
+  if (isFirstMount.current) {
+    isFirstMount.current = false;
+
+    return true;
+  }
+
+  return isFirstMount.current;
+};

hooks/use-media.ts

@@ -0,0 +1,41 @@
+// https://github.com/streamich/react-use/blob/e53ca94a0b1f20270b0f75dc2ca1fecf1e119dde/src/useMedia.ts
+
+import { useEffect, useState } from "react";
+
+const getInitialState = (query: string, defaultState?: boolean): boolean => {
+  if (defaultState !== undefined) {
+    return defaultState;
+  }
+
+  if (typeof window !== "undefined") {
+    return window.matchMedia(query).matches;
+  }
+
+  return false;
+};
+
+export const useMedia = (query: string, defaultState?: boolean): boolean => {
+  const [state, setState] = useState(getInitialState(query, defaultState));
+
+  useEffect(() => {
+    let mounted = true;
+    const mql = window.matchMedia(query);
+    const onChange = () => {
+      if (!mounted) {
+        return;
+      }
+      setState(!!mql.matches);
+    };
+
+    // TODO: switch to more modern `addEventListener()`
+    mql.addListener(onChange);
+    setState(mql.matches);
+
+    return () => {
+      mounted = false;
+      mql.removeListener(onChange);
+    };
+  }, [query]);
+
+  return state;
+};

hooks/use-update-effect.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useFirstMountState } from "./use-first-mount-state";
+
+// identical to `useEffect()` but ignores the first invocation
+export const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isFirstMount = useFirstMountState();
+
+  useEffect(() => {
+    if (!isFirstMount) {
+      return effect();
+    }
+  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+};