SKILL.md
React Hooks Patterns
Master modern React hooks patterns for building scalable, maintainable applications with proper state management, side effects, and custom logic reuse.
Common Hooks
useState
const [count, setCount] = useState(0);
const [user, setUser] = useState<User | null>(null);
// Functional updates
setCount(prev => prev + 1);useEffect
useEffect(() => {
// Side effect
const subscription = api.subscribe();
return () => subscription.unsubscribe();
}, [dependencies]);useContext
const theme = useContext(ThemeContext);useMemo & useCallback
const memoized = useMemo(() => expensive(a, b), [a, b]);
const callback = useCallback(() => doSomething(a), [a]);Custom Hooks
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Best Practices
- Always provide dependency arrays
- Use useCallback for event handlers
- Create custom hooks for reusable logic
- Keep components focused and small
- Use TypeScript for type safety
- Clean up effects properly
- Avoid excessive use of useEffect