Ethan Yu
EthanYu

Mastering React Hooks: From Basic State to Custom Hook Patterns

In this comprehensive guide, I'll share practical insights gained from rebuilding our company's design system using React Hooks. We'll explore how we transformed our codebase from class components to a more maintainable, performant Hook-based architecture, covering key patterns, common pitfalls, and optimization techniques.

Understanding the Fundamentals

Basic Hook Implementation

Let's start with a common scenario - implementing a searchable dropdown component. This example illustrates both common mistakes and best practices in React Hook usage.

// Initial implementation with potential issues
function SearchableDropdown({ items, onSelect }) {
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);

  // 🚫 Unnecessary state updates
  useEffect(() => {
    setFilteredItems(
      items.filter(item =>
        item.label.toLowerCase().includes(searchTerm.toLowerCase())
      )
    );
  }, [searchTerm, items]);

  return (
    <div>
      <input
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      {isOpen && (
        <ul>
          {filteredItems.map(item => (
            <li key={item.id} onClick={() => onSelect(item)}>
              {item.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Advanced Hook Patterns

The improved version demonstrates proper patterns for production-ready components:

// Improved version with proper patterns
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(timer)
  }, [value, delay])

  return debouncedValue
}

function useSearchableItems<T extends { label: string }>(
  items: T[],
  searchTerm: string,
) {
  // 🎯 Memoize the filter function
  const filteredItems = useMemo(() => {
    const term = searchTerm.toLowerCase()
    return searchTerm === ''
      ? items
      : items.filter((item) => item.label.toLowerCase().includes(term))
  }, [items, searchTerm])

  return filteredItems
}

Best Practices for Hook Implementation

1. Dependency Management

Understanding dependency arrays is crucial for optimal hook performance and preventing infinite renders.

// Incorrect implementation
useEffect(() => {
  const data = expensiveCalculation(props.value)
  setResult(data)
}) // Missing dependency array

// Correct implementation with proper dependencies
const memoizedValue = useMemo(
  () => expensiveCalculation(props.value),
  [props.value],
)

2. State Update Patterns

Learn how to handle state updates safely to prevent race conditions and ensure predictable behavior.

// 🚫 Anti-pattern
function Counter() {
  const [count, setCount] = useState(0);

  // This can lead to race conditions
  const increment = () => setCount(count + 1);

  // ✅ Better approach
  const safeIncrement = () => setCount(prev => prev + 1);

  return <button onClick={safeIncrement}>Increment</button>;
}

3. Custom Hook Architecture

Implementing reusable custom hooks requires careful consideration of lifecycle management and error handling.

function useAsync<T>(
  asyncFn: () => Promise<T>,
  dependencies: any[] = []
) {
  const [state, setState] = useState<{
    data?: T;
    error?: Error;
    loading: boolean;
  }>({
    loading: true
  });

  useEffect(() => {
    let mounted = true;

    setState({ loading: true });
    asyncFn()
      .then(data => {
        if (mounted) {
          setState({ data, loading: false });
        }
      })
      .catch(error => {
        if (mounted) {
          setState({ error, loading: false });
        }
      });

    return () => {
      mounted = false;
    };
  }, dependencies);

  return state;
}

// Usage example
function UserProfile({ userId }) {
  const { data: user, loading, error } = useAsync(
    () => fetchUser(userId),
    [userId]
  );

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <Profile user={user} />;
}

Performance Optimization Techniques

Memoization Strategies

Strategic use of useMemo and useCallback can significantly improve component performance.

Event Handler Optimization

Proper event handler management prevents unnecessary rerenders and memory leaks.

State Management Patterns

Efficient state management using useReducer for complex state logic:

// Example of optimized state management
const [state, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload }
    case 'SET_ERROR':
      return { ...state, error: action.payload }
    default:
      return state
  }
}, initialState)

Conclusion

Our migration to React Hooks yielded several key benefits:

  • 30% reduction in bundle size
  • Improved component reusability
  • Enhanced development velocity

Consider implementing these patterns in your own projects, and remember that optimization should always be driven by actual performance requirements rather than premature optimization.

Further Resources

  • React Hooks Documentation
  • Performance Measurement Tools
  • Component Design Patterns

If you're working with React Hooks, I'd love to hear about your experiences and patterns. Have you found other optimizations that worked well for your use cases? Let me know in the comments!

P.S. Yes, I did spend way too much time optimizing that dropdown component. But hey, now it can handle thousands of items without breaking a sweat!

Comments