Refactor useReducedMotion

ts/hooks/useReducedMotion.ts

@@ -3,32 +3,25 @@
 
 import { useEffect, useState } from 'react';
 
-function getReducedMotionQuery(): MediaQueryList {
+// Allows this to work in Node process
-  return window.matchMedia('(prefers-reduced-motion: reduce)');
+let reducedMotionQuery: MediaQueryList;
-}
+function getReducedMotionQuery() {
-
+  if (reducedMotionQuery == null) {
-// Inspired by <https://github.com/infiniteluke/react-reduce-motion>.
+    reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
-export function useReducedMotion(): boolean {
-  const initialQuery = getReducedMotionQuery();
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
-    initialQuery.matches
-  );
-
-  useEffect(() => {
-    const query = getReducedMotionQuery();
-
-    function changePreference() {
-      setPrefersReducedMotion(query.matches);
   }
-
+  return reducedMotionQuery;
-    changePreference();
+}
-
+
-    query.addEventListener('change', changePreference);
+export function useReducedMotion(): boolean {
-
+  const [matches, setMatches] = useState(getReducedMotionQuery().matches);
-    return () => {
+  useEffect(() => {
-      query.removeEventListener('change', changePreference);
+    function onChange(event: MediaQueryListEvent) {
-    };
+      setMatches(event.matches);
-  });
+    }
-
+    getReducedMotionQuery().addEventListener('change', onChange);
-  return prefersReducedMotion;
+    return () => {
+      getReducedMotionQuery().removeEventListener('change', onChange);
+    };
+  }, []);
+  return matches;
 }