default web initial value to current media query value

Author: infiniteluke

src/targets/native/index.test.js

@@ -12,14 +12,14 @@ import { useReduceMotion } from './';
 
 test('returns true if "Reduce motion" is enabled', async () => {
   AccessibilityInfo.isReduceMotionEnabled.mockResolvedValue(true);
-  const { result, waitForNextUpdate } = renderHook(() => useReduceMotion());
+  const { result, waitForNextUpdate } = renderHook(useReduceMotion);
   expect(result.current).toBe(false);
   await waitForNextUpdate();
   expect(result.current).toBe(true);
 });
 
 test('returns false if "Reduce motion" is disabled', async () => {
   AccessibilityInfo.isReduceMotionEnabled.mockResolvedValue(false);
-  const { result } = renderHook(() => useReduceMotion());
+  const { result } = renderHook(useReduceMotion);
   expect(result.current).toBe(false);
 });

src/targets/web/index.js

@@ -14,17 +14,18 @@ if (
 }
 
 export function useReduceMotion() {
-  const [matches, setMatch] = React.useState(false);
-  const mediaQuery = React.useRef();
+  const [matches, setMatch] = React.useState(
+    window.matchMedia('(prefers-reduced-motion: reduce)')
+  );
   React.useEffect(() => {
-    mediaQuery.current = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
     const handleChange = () => {
-      setMatch(mediaQuery.current.matches);
+      setMatch(mq.matches);
     };
     handleChange();
-    mediaQuery.current.addEventListener('change', handleChange);
+    mq.addEventListener('change', handleChange);
     return () => {
-      mediaQuery.current.removeEventListener('change', handleChange);
+      mq.removeEventListener('change', handleChange);
     };
   }, []);
   return matches;

src/targets/web/index.test.js

@@ -9,16 +9,16 @@ const mqDefaults = {
   removeEventListener: jest.fn(),
 };
 
-window.matchMedia = jest.fn().mockImplementationOnce(query => {
-  return {
-    ...mqDefaults,
-    matches: true,
-    media: query,
-  };
-});
-
 test('returns true if "Reduce motion" is enabled', async () => {
-  const { result } = renderHook(() => useReduceMotion());
+  window.matchMedia = jest.fn().mockImplementation(query => {
+    return {
+      ...mqDefaults,
+      matches: true,
+      media: query,
+    };
+  });
+
+  const { result } = renderHook(useReduceMotion);
 
   expect(result.current).toBe(true);
 });
@@ -31,14 +31,14 @@ test('returns false if "Reduce motion" is disabled', async () => {
     };
   });
 
-  const { result } = renderHook(() => useReduceMotion());
+  const { result } = renderHook(useReduceMotion);
 
   expect(result.current).toBe(false);
 });
 
 test('handles change of "prefers-reduce-motion" media query value', async () => {
   let change;
-  const mockMedia = jest.fn().mockImplementationOnce(query => {
+  window.matchMedia = jest.fn().mockImplementation(query => {
     return {
       ...mqDefaults,
       matches: false,
@@ -49,9 +49,8 @@ test('handles change of "prefers-reduce-motion" media query value', async () =>
       media: query,
     };
   });
-  window.matchMedia = mockMedia;
 
-  const { result } = renderHook(() => useReduceMotion());
+  const { result } = renderHook(useReduceMotion);
 
   expect(result.current).toBe(false);