[useMediaQuery] switch to uSES

packages/react-responsive/src/BreakpointsContext.tsx

@@ -19,13 +19,13 @@
   additionalBreakpoints?: ExposedBreakpoints;
 }
 
-export const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({
+export function BreakpointsProvider({
   breakpoints = defaultBreakpoints,
   additionalBreakpoints,
   children,
-}) => {
+}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement {
   return (
     <BreakpointsContext.Provider
       value={sanitize({
         ...breakpoints,
         ...additionalBreakpoints,
@@ -34,6 +34,4 @@
       {children}
     </BreakpointsContext.Provider>
   );
-};
-
-BreakpointsProvider.displayName = "BreakpointsProvider";
+}

packages/react-responsive/src/fromBreakpointToMedia.ts

@@ -1,6 +1,6 @@
 import { Breakpoint } from "./sanitize";
 
-export const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {
+export function fromBreakpointToMedia(breakpoint: Breakpoint): string {
   const mediaList: string[] = [];
   const [minValue, maxValue, unit, direction] = breakpoint;
   let str;
@@ -18,4 +18,4 @@ export const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {
   }
 
   return " " + mediaList.join(" and ");
-};
+}

packages/react-responsive/src/mediaQueryBuilder.ts

@@ -1,9 +1,8 @@
 import { Breakpoints } from "./sanitize";
 import { fromBreakpointToMedia } from "./fromBreakpointToMedia";
 
-export const mediaQueryBuilder =
-  (breakpoints: Breakpoints) =>
-  (on = ""): string => {
+export function mediaQueryBuilder(breakpoints: Breakpoints) {
+  return function toMediaQuery(on = ""): string {
     if (!on) {
       return "";
     }
@@ -23,3 +22,4 @@ export const mediaQueryBuilder =
     }
     return mediaQuery;
   };
+}

packages/react-responsive/src/sanitize.ts

@@ -52,7 +52,7 @@ export interface Breakpoints {
   [breakpoint: string]: Breakpoint;
 }
 
-export const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {
+export function sanitize(inBreakpoints: ExposedBreakpoints): Breakpoints {
   return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {
     const breakpoint = inBreakpoints[breakpointName];
 
@@ -91,4 +91,4 @@ export const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {
 
     return breakpoints;
   }, {});
-};
+}

packages/react-responsive/src/useBreakpoint.ts

@@ -6,11 +6,11 @@ import { mediaQueryBuilder } from "./mediaQueryBuilder";
 
 import { useMediaQuery } from "./useMediaQuery";
 
-export const useBreakpoint = (on?: string): boolean => {
+export function useBreakpoint(on?: string): boolean {
   const breakpoints = React.useContext(BreakpointsContext);
   const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);
 
   const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);
 
   return useMediaQuery(mediaQuery || "-");
-};
+}

packages/react-responsive/src/useMediaQuery.ts

@@ -1,22 +1,19 @@
 import * as React from "react";
 
-export const useMediaQuery = (mediaQuery: string): boolean => {
+export function useMediaQuery(mediaQuery: string): boolean {
   const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);
-  const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);
 
-  React.useLayoutEffect(() => {
-    setIsShown(mediaQueryList.matches);
-    const listener = (event: MediaQueryListEvent) => {
-      // Those are important updates, so we don't want to use transitions on them
-      setIsShown(event.matches);
-    };
-
-    // cannot use addEventListener for IE 11 and safari 13-
-    mediaQueryList.addListener(listener);
-    return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, [mediaQueryList]);
-
-  return isShown;
-};
+  // Those are important updates, so we don't want to use transitions on them
+  return React.useSyncExternalStore(
+    React.useCallback(
+      (callback) => {
+        // cannot use addEventListener for IE 11 and safari 13-
+        mediaQueryList.addListener(callback);
+        return () => mediaQueryList.removeListener(callback);
+      },
+      [mediaQueryList],
+    ),
+    () => mediaQueryList.matches,
+    // Don't add `() => false`, so that node implementations can define their own behavior for server-side rendering via `mock-match-media`
+  );
+}