Custom Hooks
1. useWorker
useState
useEffect
useRef
useCallback
Manages WebWorker lifecycle and communication, handling concurrent processing similar to useReducer.
Implementation Details:
- Uses useState to track WebWorker state and responses
- useEffect manages WebWorker lifecycle (creation/termination)
- useRef stores the WebWorker instance
- useCallback memoizes message handlers
Example Usage:
const [result, postMessage] = useWorker('/worker.js');
2. useStateDepencyTracking
useState
useRef
useCallback
From SWR library - tracks which state properties are used to prevent unnecessary rerenders.
Implementation Details:
- Uses useRef to track accessed properties
- useState manages the tracked state
- useCallback creates memoized property getters
Example Usage:
const { data, error } = useSWR('/api/data');
3. useInterval
Dan Abramov's implementation for proper interval handling in React components.
Implementation Details:
- useRef stores the latest callback to avoid stale closures
- useEffect manages interval creation and cleanup
Example Usage:
useInterval(() => {
// Your interval code
}, 1000);
4. useKeyboardControls
useRef
useEffect
useCallback
Manages keyboard event listeners with form field detection and handler management.
Implementation Details:
- useRef stores keyboard event handlers
- useEffect sets up and cleans up event listeners
- useCallback memoizes event handling functions
Example Usage:
useKeyboardControls({
ArrowLeft: () => handleMove('left'),
ArrowRight: () => handleMove('right')
});
5. usePreventNavigation
useState
useEffect
useCallback
Blocks navigation during form editing with dirty state management.
Implementation Details:
- useState tracks form dirty state
- useEffect manages beforeunload event
- useCallback handles navigation prevention
Example Usage:
usePreventNavigation(isDirty, () => {
return window.confirm('Discard changes?');
});
6. useCookieWithListener
Monitors cookie changes from any source with Firefox polyfill support.
Implementation Details:
- useState stores current cookie value
- useEffect sets up cookie change listener
- Includes Firefox-specific polyfill
Example Usage:
const cookieValue = useCookieWithListener('cookieName');
7. useHookedComponent
useRef
useReducer
useCallback
Enables imperative component control with reduced rerenders.
Implementation Details:
- useRef maintains component reference
- useReducer manages complex state transitions
- useCallback memoizes imperative methods
Example Usage:
const component = useHookedComponent(MyComponent);
component.show();
8. useRealtimeTopic
useState
useEffect
useContext
Handles MQTT topic subscriptions with automatic cleanup.
Implementation Details:
- useState manages subscription state
- useEffect handles subscription lifecycle
- useContext accesses MQTT client
Example Usage:
const messages = useRealtimeTopic('my/mqtt/topic');
9. useAnalytics
Abstracts analytics provider with development mode console logging.
Implementation Details:
- useContext provides analytics configuration
- useCallback memoizes tracking functions
Example Usage:
const { logEvent, logError } = useAnalytics();
logEvent('button_click');
10. useHover
Robust hover detection that handles dropped mouse events.
Implementation Details:
- useState tracks hover state
- useEffect manages mouseover/mouseout events
- Includes dropped event recovery
Example Usage:
const isHovered = useHover(elementRef);
11. useSpeech
useState
useEffect
useRef
Browser speech API integration with lifecycle management.
Implementation Details:
- useState manages speech recognition state
- useEffect handles API lifecycle
- useRef stores recognition instance
Example Usage:
const { transcript, listening, startListening } = useSpeech();
12. useGamepad
Manages gamepad API for Xbox controller input.
Implementation Details:
- useState tracks gamepad state
- useEffect handles gamepad connection events
- Includes button mapping support
Example Usage:
const { buttons, axes } = useGamepad(0);