Describe the bug
There is a React Hydration Mismatch error originating from the useReducedMotion custom hook. The hook synchronously initializes its state by calling window.matchMedia directly in the useState callback on the client. If a user's operating system has "prefers-reduced-motion" enabled, the client's initial render evaluates to true, which conflicts with the Next.js Server-Side Render (SSR) that always evaluates to false.
To Reproduce
Steps to reproduce the behavior:
- Open your Operating System settings and enable "Reduce Motion" (e.g., Windows: Accessibility > Visual effects > Animation effects = off).
- Open the DevPath website in your browser.
- Open the browser Developer Tools console.
- Refresh the page to trigger a fresh Server-Side Render.
- See the React Hydration Mismatch error in the console.
Expected behavior
The application should load without any hydration errors. The useReducedMotion hook should default to false during the initial client render (matching the server) and update its state within a useEffect hook after hydration is complete.
Screenshots
N/A
Desktop (please complete the following information):
- OS: All (Windows, Mac, Linux)
- Browser: All (Chrome, Safari, Firefox)
- Version: Latest
Smartphone (please complete the following information):
- Device: All
- OS: All (iOS, Android)
- Browser: All
Additional context
File affected: src/hooks/useReducedMotion.ts
Describe the bug
There is a React Hydration Mismatch error originating from the
useReducedMotioncustom hook. The hook synchronously initializes its state by callingwindow.matchMediadirectly in theuseStatecallback on the client. If a user's operating system has "prefers-reduced-motion" enabled, the client's initial render evaluates totrue, which conflicts with the Next.js Server-Side Render (SSR) that always evaluates tofalse.To Reproduce
Steps to reproduce the behavior:
Expected behavior
The application should load without any hydration errors. The
useReducedMotionhook should default tofalseduring the initial client render (matching the server) and update its state within auseEffecthook after hydration is complete.Screenshots
N/A
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
File affected:
src/hooks/useReducedMotion.ts