javascript / intermediate
Snippet
Hydrierungs-sicherer Media-Query-Hook
In Next.js verursacht die direkte Verwendung von window.matchMedia bei der Initialisierung einen Hydrierungsfehler (Hydration Mismatch), da der Server kein 'window'-Objekt besitzt. Dieser Hook initialisiert den Zustand als 'false' und aktualisiert ihn innerhalb von useEffect, um sicherzustellen, dass er nur auf dem Client ausgeführt wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useState, useEffect } from 'react';export function useMediaQuery(query: string) {const [matches, setMatches] = useState(false);useEffect(() => {const media = window.matchMedia(query);if (media.matches !== matches) setMatches(media.matches);const listener = () => setMatches(media.matches);media.addEventListener('change', listener);return () => media.removeEventListener('change', listener);}, [query, matches]);return matches;}
nextjs
Erklärung
1
const [matches, setMatches] = useState(false);
Initialisiert mit einem Standardwert, der dem serverseitigen Rendering entspricht.
2
useEffect(() => { ... }, [query, matches]);
Wird nur auf dem Client ausgeführt und vermeidet so serverseitige Fehler.
3
return () => media.removeEventListener('change', listener);
Entfernt den Event-Listener, um Speicherlecks zu verhindern.