javascript / expert
Snippet
Komponierbare Logik via Higher-Order Hook Interceptors
Higher-Order Hooks ermöglichen es Ihnen, bestehende Hooks zu umhüllen, um Cross-Cutting-Concerns wie Analytics, Logging oder Performance-Tracking zu injizieren, ohne die Logik des ursprünglichen Hooks zu ändern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
const withAnalytics = (useHook: Function) => (args: any) => {const result = useHook(args);useEffect(() => {if (result.triggered) {Analytics.track('Action Performed', { ...args });}}, [result.triggered]);return result;};const useLoggedAuth = withAnalytics(useAuth);
react
Erklärung
1
const withAnalytics = (useHook) => (args) => ...
Eine Factory-Funktion, die einen neuen Hook zurückgibt und dem Decorator-Pattern für Hooks folgt.
2
useEffect(() => { ... }, [result.triggered])
Fangt interne Statusänderungen des Hooks ab, um sekundäre Seiteneffekte automatisch auszuführen.