javascript / intermediate
Snippet
Logik-Kapselung mit Custom Hooks
Custom Hooks ermöglichen es, Komponentenlogik in wiederverwendbare Funktionen zu extrahieren. Sie müssen mit 'use' beginnen, um den React-Hook-Regeln zu entsprechen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function useWindowSize() {const [size, setSize] = useState(window.innerWidth);useEffect(() => {const handleResize = () => setSize(window.innerWidth);window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);return size;}
react
Erklärung
1
function useWindowSize() {
Erstellt einen wiederverwendbaren Hook, der mit dem Präfix 'use' beginnt.
2
window.addEventListener('resize', handleResize);
Richtet einen Event-Listener ein, wenn die Komponente gemountet wird.
3
return size;
Gibt den Zustandswert zur Verwendung in einer beliebigen Komponente zurück.