feat: add new skills to skills-lock.json and update use-pixel-heat component
All checks were successful
Deploy / deploy (push) Successful in 7m30s

- Added new skills: find-skills, frontend-ui-engineering, and vercel-react-best-practices to skills-lock.json.
- Updated use-pixel-heat.ts to import both animate and AnimationPlaybackControls from motion for improved animation handling.
This commit is contained in:
bilalgursen
2026-08-08 16:08:54 +03:00
parent 78d7c51a7a
commit ea85a053c5
83 changed files with 8589 additions and 5 deletions

View File

@@ -0,0 +1,39 @@
---
title: useEffectEvent for Stable Callback Refs
impact: LOW
impactDescription: prevents effect re-runs
tags: advanced, hooks, useEffectEvent, refs, optimization
---
## useEffectEvent for Stable Callback Refs
Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
**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 (using React's useEffectEvent):**
```tsx
import { useEffectEvent } from 'react';
function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('')
const onSearchEvent = useEffectEvent(onSearch)
useEffect(() => {
const timeout = setTimeout(() => onSearchEvent(query), 300)
return () => clearTimeout(timeout)
}, [query])
}
```