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) {
+    reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+  }
+  return reducedMotionQuery;
 }
 
-// Inspired by <https://github.com/infiniteluke/react-reduce-motion>.
 export function useReducedMotion(): boolean {
-  const initialQuery = getReducedMotionQuery();
+  const [matches, setMatches] = useState(getReducedMotionQuery().matches);
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
-    initialQuery.matches
-  );
-
   useEffect(() => {
-    const query = getReducedMotionQuery();
+    function onChange(event: MediaQueryListEvent) {
-
+      setMatches(event.matches);
-    function changePreference() {
-      setPrefersReducedMotion(query.matches);
     }
-
+    getReducedMotionQuery().addEventListener('change', onChange);
-    changePreference();
-
-    query.addEventListener('change', changePreference);
-
     return () => {
-      query.removeEventListener('change', changePreference);
+      getReducedMotionQuery().removeEventListener('change', onChange);
     };
-  });
+  }, []);
-
+  return matches;
-  return prefersReducedMotion;
 }