AgentSkillsCN

useeffectevent-for-stable-callback-refs

使用 useEffectEvent 为稳定回调引用保驾护航

SKILL.md
--- frontmatter
name: useeffectevent-for-stable-callback-refs
description: useEffectEvent for Stable Callback Refs

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