react-hooks-patterns

spjoshis's avatarfrom spjoshis

Master React hooks patterns including useState, useEffect, useContext, custom hooks, and advanced patterns for building scalable React applications.

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides a comprehensive guide and implementation patterns for React hooks, enabling developers to build scalable, maintainable, and high-performance React applications. It covers fundamental hooks like useState and useEffect, custom hook creation, and advanced optimization techniques using useMemo and useCallback.

Use Cases

  • Architecting scalable React applications by applying industry-standard hooks patterns for state and side-effect management.
  • Developing reusable custom hooks to encapsulate complex business logic and improve codebase maintainability.
  • Optimizing component performance and reducing unnecessary re-renders through strategic use of useMemo and useCallback.
  • Implementing clean and type-safe global state management using the Context API to eliminate prop-drilling in large-scale projects.
namereact-hooks-patterns
descriptionMaster React hooks patterns including useState, useEffect, useContext, custom hooks, and advanced patterns for building scalable React applications.

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

  1. Always provide dependency arrays
  2. Use useCallback for event handlers
  3. Create custom hooks for reusable logic
  4. Keep components focused and small
  5. Use TypeScript for type safety
  6. Clean up effects properly
  7. Avoid excessive use of useEffect

Resources