mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tommaso CasaburiandGitHub
a92b185a66
* chore(ai-workflow): track repo-managed review tooling * fix(ai-workflow): remove repo-specific path assumptions Make shared workflow hooks and APK testing guidance resolve paths from the repo and contributor environment so the tooling works for all contributors, not just one machine.
56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
---
|
|
title: Store Event Handlers in Refs
|
|
impact: LOW
|
|
impactDescription: stable subscriptions
|
|
tags: advanced, hooks, refs, event-handlers, optimization
|
|
---
|
|
|
|
## Store Event Handlers in Refs
|
|
|
|
Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.
|
|
|
|
**Incorrect (re-subscribes on every render):**
|
|
|
|
```tsx
|
|
function useWindowEvent(event: string, handler: (e) => void) {
|
|
useEffect(() => {
|
|
window.addEventListener(event, handler)
|
|
return () => window.removeEventListener(event, handler)
|
|
}, [event, handler])
|
|
}
|
|
```
|
|
|
|
**Correct (stable subscription):**
|
|
|
|
```tsx
|
|
function useWindowEvent(event: string, handler: (e) => void) {
|
|
const handlerRef = useRef(handler)
|
|
useEffect(() => {
|
|
handlerRef.current = handler
|
|
}, [handler])
|
|
|
|
useEffect(() => {
|
|
const listener = (e) => handlerRef.current(e)
|
|
window.addEventListener(event, listener)
|
|
return () => window.removeEventListener(event, listener)
|
|
}, [event])
|
|
}
|
|
```
|
|
|
|
**Alternative: use `useEffectEvent` if you're on latest React:**
|
|
|
|
```tsx
|
|
import { useEffectEvent } from 'react'
|
|
|
|
function useWindowEvent(event: string, handler: (e) => void) {
|
|
const onEvent = useEffectEvent(handler)
|
|
|
|
useEffect(() => {
|
|
window.addEventListener(event, onEvent)
|
|
return () => window.removeEventListener(event, onEvent)
|
|
}, [event])
|
|
}
|
|
```
|
|
|
|
`useEffectEvent` provides a cleaner API for the same pattern: it creates a stable function reference that always calls the latest version of the handler.
|