Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
The useLatest hook addresses the stale closure problem in React components by maintaining a mutable reference to the most recent version of a value. When passing callbacks as props, those functions often change on every render, triggering unnecessary effect execution. By storing the callback in a ref, you decouple the execution logic from the dependency list. The hook synchronizes the ref's current value with the provided input via an effect, ensuring that the latest logic is always available when the ref is accessed. This strategy keeps effect triggers minimal while preventing outdated state or prop data from influencing asynchronous tasks like timers or event listeners. It serves as an essential pattern for maintaining stable component lifecycles without sacrificing access to current props or state variables during long-running operations.
When to Use This Skill
- •Managing debounced search functions triggered by input changes
- •Handling interval-based telemetry logging that needs the latest user data
- •Triggering callbacks inside event listeners that shouldn't re-bind
- •Maintaining access to latest props during WebSocket message handling
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “how to stop useEffect from running when my callback prop changes
- “fix stale closure in react timeout
- “create a stable ref for changing props
- “how to get the latest value inside a useEffect without adding to deps
- “prevent unnecessary re-renders when passing functions as props
What this skill does
- •Stores mutable references to current prop values
- •Prevents effect re-runs caused by fluctuating function references
- •Synchronizes internal ref state with every render cycle
- •Provides access to current state within stable intervals
- •Eliminates stale closure bugs in asynchronous logic
When not to use it
- ✕When the effect actually needs to re-run based on dependency changes
- ✕When standard state management can solve the synchronization problem naturally
Example workflow
- Define the useLatest helper in your project utilities
- Identify a component where a useEffect triggers too often due to a callback dependency
- Wrap the callback prop inside the useLatest hook
- Update the effect dependency array to remove the original callback prop
- Reference the .current property of the ref inside your effect logic
Prerequisites
- –Basic understanding of React refs
- –Familiarity with useEffect dependency arrays
Pitfalls & limitations
- !Requires constant manual access to .current, which can be overlooked
- !Does not trigger a re-render when the ref value updates
- !Can hide bugs if overused to bypass proper dependency management
FAQ
How it compares
While manual ref management requires boilerplate useEffect calls for every variable, this hook centralizes the logic into a reusable pattern that enforces consistent behavior.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
**Implementation:**
function useLatest<T>(value: T) {
const ref = useRef(value)
useEffect(() => {
ref.current = value
}, [value])
return ref
}**Incorrect (effect re-runs on every callback change):**
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):**
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])
}How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/advanced-use-latest/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/advanced-use-latest/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/advanced-use-latest/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/advanced-use-latest/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
