skillhub-088-vercel-react-best-practices/rules/advanced-use-latest.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
useEffectEvent 用于稳定回调引用	LOW	防止副作用重复执行	advanced, hooks, useEffectEvent, refs, optimization

useEffectEvent 用于稳定回调引用

在回调中访问最新值，而无需将其添加到依赖数组中。防止副作用重复执行，同时避免闭包过期问题。

错误用法（每次回调变化时副作用都会重新执行）：

function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
  const [query, setQuery] = useState('')

  useEffect(() => {
    const timeout = setTimeout(() => onSearch(query), 300)
    return () => clearTimeout(timeout)
  }, [query, onSearch])
}

正确用法（使用 React 的 useEffectEvent）：

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])
}