useLatest for Stable Callback Refs Skill for AI Agents
by escafati
impact: LOW impactDescription: prevents effect re-runs tags: advanced, hooks, useLatest, refs, optimization
4downloads
Updated
by escafati
impact: LOW impactDescription: prevents effect re-runs tags: advanced, hooks, useLatest, refs, optimization
The useLatest for Stable Callback Refs skill enables AI agents like Claude and ChatGPT to impact: low impactdescription: prevents effect re-runs tags: advanced, hooks, uselatest, refs, optimization
## useLatest for Stable Callback Refs
Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
**Implementation:**
```typescript
function useLatest<T>(value: T) {
const ref = useRef(value)
useEffect(() => {
ref.current = value
}, [value])
return ref
}
```
**Incorrect (effect re-runs on every callback change):**
```tsx
function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('')
useEffect(() => {
const timeout = setTimeout(() => onSearch(query), 300)
return () => clearTimeout(timeout)
}, [query, onSearch])
}
```
**Correct (stable effect, fresh callback):**
```tsx
function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('')
const onSearchRef = useLatest(onSearch)
useEffect(() => {
const timeout = setTimeout(() => onSearchRef.current(query), 300)
return () => clearTimeout(timeout)
}, [query])
}
```