react-use-callback
React: useCallback Best Practices
Core Principle
useCallback caches a function definition between re-renders until its dependencies change.
Only use useCallback for specific performance optimizations - not by default.
When to Use useCallback
1. Passing Callbacks to Memoized Children
When passing a function to a component wrapped in memo():
import { useCallback, memo } from 'react';
const ExpensiveChild = memo(function ExpensiveChild({ onClick }) {
// Expensive rendering logic
More from flpbalada/my-opencode-config
progressive-disclosure
Reduce complexity by revealing information progressively. Use when designing
56social-proof-psychology
Leverage social proof principles to build trust and influence user behavior.
39react-useeffect-avoid
Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.
38trust-psychology
Build trust signals that reduce perceived risk and enable user action. Use
37five-whys
Conduct root cause analysis using the Five Whys technique. Use when
34cognitive-fluency-psychology
Apply cognitive fluency principles to improve clarity, trust, and conversion.
32