Add warnings

Author: hectahertz

packages/react/src/hooks/useMedia.tsx

@@ -9,6 +9,9 @@ import {warning} from '../utils/warning'
  * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
  * value of the media query string, if available
  *
+ * Warning: If rendering on the server, and no `defaultState` is provided,
+ * this could cause a hydration mismatch between server and client.
+ *
  * @example
  * function Example() {
  *   const coarsePointer = useMedia('(pointer: coarse)');
@@ -34,7 +37,7 @@ export function useMedia(mediaQueryString: string, defaultState?: boolean) {
     // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
     warning(
       true,
-      '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.',
+      '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatch.',
     )
 
     return false

packages/react/src/hooks/useResponsiveValue.ts

@@ -41,14 +41,16 @@ export function isResponsiveValue(value: any): value is ResponsiveValue<any> {
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
+ * Warning: This hook is not fully SSR compatible as it relies on `useMedia` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
+ *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'
  */
-// TODO: Improve SSR support
 export function useResponsiveValue<T, F>(value: T, fallback: F): FlattenResponsiveValue<T> | F {
-  // Check viewport size
+  // TODO: Improve SSR support
   // TODO: What is the performance cost of creating media query listeners in this hook?
+  // Check viewport size
   const isNarrowViewport = useMedia(viewportRanges.narrow, false)
   const isRegularViewport = useMedia(viewportRanges.regular, false)
   const isWideViewport = useMedia(viewportRanges.wide, false)