Make hooks client-side rendering and server-side rendering compatible

Author: Leroy Korterink

src/hooks/useContentRect/useContentRect.ts

@@ -9,8 +9,11 @@ import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
  */
 export function useContentRect(
   target: Unreffable<Element | null>,
+  serverSideRendering = false,
 ): RefObject<DOMRectReadOnly | null> {
-  const contentRectRef = useRef<DOMRectReadOnly | null>(null);
+  const contentRectRef = useRef<DOMRectReadOnly | null>(
+    serverSideRendering ? null : unref(target)?.getBoundingClientRect() ?? null,
+  );
 
   const onResize = useCallback<ResizeObserverCallback>((entries): void => {
     contentRectRef.current = entries.at(0)?.contentRect ?? null;

src/hooks/useContentRectState/useContentRectState.ts

@@ -7,8 +7,13 @@ import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
  * A hook that returns the content rectangle of the target element.
  * The content rectangle is updated whenever the target element is resized.
  */
-export function useContentRectState(target: Unreffable<Element | null>): DOMRectReadOnly | null {
-  const [contentRect, setContentRect] = useState<DOMRectReadOnly | null>(null);
+export function useContentRectState(
+  target: Unreffable<Element | null>,
+  serverSideRendering = false,
+): DOMRectReadOnly | null {
+  const [contentRect, setContentRect] = useState<DOMRectReadOnly | null>(
+    serverSideRendering ? null : unref(target)?.getBoundingClientRect() ?? null,
+  );
   const rafRef = useRef(0);
 
   const onResize = useCallback<ResizeObserverCallback>((entries) => {

src/hooks/useMediaDuration/useMediaDuration.ts

@@ -6,7 +6,9 @@ import { type MutableRefObject, useCallback, useEffect, useState } from 'react';
 export function useMediaDuration(
   mediaElementRef: MutableRefObject<HTMLMediaElement | null>,
 ): number {
-  const [mediaDuration, setMediaDuration] = useState<number>(Number.NaN);
+  const [mediaDuration, setMediaDuration] = useState<number>(
+    mediaElementRef.current?.duration ?? Number.NaN,
+  );
 
   const updateDuration = useCallback(() => {
     setMediaDuration(mediaElementRef.current?.duration ?? Number.NaN);

src/hooks/useMediaQuery/useMediaQuery.mdx

@@ -12,23 +12,48 @@ Hook that returns true when the media query matches.
 function useMediaQuery(mediaQueryOrVariableName: string, defaultValue = false): boolean;
 ```
 
-## Usage
+## Using a media query string
 
-Define the media query in your CSS variables.
+Use the hook in your component using a media query string.
+
+```tsx
+function DemoComponent() {
+  const isMinWidth480px = useMediaQuery('(min-width: 480px)');
+
+  return <div>{isMinWidth480px ? 'large' : 'small'}</div>;
+}
+```
+
+## Using a CSS variable
+
+To use the hook in your component using the CSS variable, define the media query in your CSS
+variables.
 
 ```css
 :root {
   --min-width-480: (min-width: 480px);
 }
 ```
 
-Use the hook in your component using the CSS variable or a custom media query.
+Use the media query variable as the first argument.
+
+```tsx
+function DemoComponent() {
+  const isMinWidth480px = useMediaQuery('--min-width-480');
+
+  return <div>{isMinWidth480px ? 'large' : 'small'}</div>;
+}
+```
+
+## Server-side rendering
+
+The hook returns the default value when the `matchMedia` API is not available (for example in
+server-side rendering). Set a default value if you get hydration mismatch errors.
 
 ```tsx
 function DemoComponent() {
-  const isMinWidth480pxUsingVar = useMediaQuery('--min-width-480');
-  const isMinWidth480pxUsingQuery = useMediaQuery('(min-width: 480px)');
+  const isMinWidth480px = useMediaQuery('(min-width: 480px)', true);
 
-  return <div>{isMinWidth480pxUsingVar && isMinWidth480pxUsingQuery ? 'large' : 'small'}</div>;
+  return <div>{isMinWidth480px ? 'large' : 'small'}</div>;
 }
 ```

src/hooks/useMediaQuery/useMediaQuery.ts

@@ -49,16 +49,18 @@ export function getMediaQueryList(
  * Hook that returns a boolean indicating whether the media query matches.
  *
  * @param mediaQueryOrVariableName - The name of the CSS variable that describes the media query.
- * @param defaultValue - The default value to return if the matchMedia API is not available.
+ * @param defaultValue - The default value to return if the matchMedia API is not available (set a value to make this hook work in SSR mode).
  */
 export function useMediaQuery(
   mediaQueryOrVariableName: MediaQueryValues,
-  defaultValue = false,
-): boolean {
+  defaultValue?: boolean,
+): boolean | undefined {
   const [mediaQueryList, setMediaQueryList] = useState<MediaQueryList | undefined>(() =>
     getMediaQueryList(mediaQueryOrVariableName),
   );
-  const [matches, setMatches] = useState<boolean | undefined>(defaultValue);
+  const [matches, setMatches] = useState<boolean | undefined>(
+    defaultValue === undefined ? mediaQueryList?.matches : defaultValue,
+  );
 
   useEffect(() => {
     const newMediaQueryList = getMediaQueryList(mediaQueryOrVariableName);