React hooks patterns - VoidBin Blog

Introduction

React Hooks revolutionized how we write React components by enabling stateful logic in functional components. Since their introduction in React 16.8, developers have discovered powerful patterns that improve code organization, reusability, and performance. In this post, we'll explore some of the most useful React Hooks patterns that can help you write cleaner, more maintainable code.

Whether you're building a small application or a large-scale project, understanding these patterns will help you leverage Hooks more effectively. We'll cover custom hooks composition, the provider pattern with hooks, conditional hooks, and performance optimization techniques.

Custom Hooks for Logic Composition

One of the most powerful aspects of React Hooks is the ability to extract component logic into reusable functions. Custom hooks allow you to share stateful logic between components without changing your component hierarchy.

Here's a practical example of a custom hook for fetching data:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

This custom hook can then be used in multiple components:

function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

The key benefits of this pattern are:

Logic is encapsulated and reusable
Components remain focused on rendering
Testing becomes easier as you can test the hook separately

Provider Pattern with useContext

The combination of useContext and useReducer creates a powerful alternative to state management libraries for many use cases. This pattern is particularly useful for sharing state across multiple components in a tree.

Here's how to implement a theme switcher using this pattern:

import React, { createContext, useContext, useReducer } from 'react';

const ThemeContext = createContext();

const themeReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light'
      };
    default:
      return state;
  }
};

export function ThemeProvider({ children }) {
  const [state, dispatch] = useReducer(themeReducer, { theme: 'light' });

  return (
    <ThemeContext.Provider value={{ state, dispatch }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

Components can then consume the theme context:

function ThemeButton() {
  const { state, dispatch } = useTheme();

  return (
    <button
      onClick={() => dispatch({ type: 'TOGGLE_THEME' })}
      style={{
        backgroundColor: state.theme === 'dark' ? '#333' : '#FFF',
        color: state.theme === 'dark' ? '#FFF' : '#333'
      }}
    >
      Toggle Theme
    </button>
  );
}

This pattern provides:

Clean separation of concerns
Easy state management without prop drilling
Predictable state updates through actions

Conditional Hooks with Lazy Initialization

While React's rules dictate that hooks must be called unconditionally at the top level of your component, there are patterns for conditionally initializing state or memoized values.

The useState hook accepts a function for lazy initialization, which is useful when the initial state is expensive to compute:

function ExpensiveComponent({ complexData }) {
  const [processedData] = useState(() => {
    // This expensive computation runs only on initial render
    return complexData.map(item => ({
      ...item,
      processed: heavyComputation(item)
    }));
  });

  // Render using processedData
}

Similarly, useMemo can be used to conditionally compute derived values:

function ProductList({ products, filter }) {
  const filteredProducts = useMemo(() => {
    return products.filter(product => 
      product.name.includes(filter) && 
      product.price > MIN_PRICE
    );
  }, [products, filter]);

  // Render filteredProducts
}

These patterns help with:

Performance optimization by avoiding unnecessary computations
Cleaner component logic by separating concerns
Better control over when expensive operations occur

Performance Optimization Patterns

React Hooks provide several patterns to optimize component performance. One common pattern is to memoize callback functions with useCallback to prevent unnecessary re-renders:

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // Without useCallback, this would create a new function on every render
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // Empty dependency array means it never changes

  return <ChildComponent onClick={handleClick} />;
}

// ChildComponent is memoized to prevent unnecessary re-renders
const ChildComponent = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Increment</button>;
});

Another useful pattern is the "windowed list" technique for rendering large datasets:

function BigList({ items }) {
  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 20 });
  
  const visibleItems = useMemo(() => {
    return items.slice(visibleRange.start, visibleRange.end);
  }, [items, visibleRange]);

  return (
    <div 
      style={{ height: '500px', overflow: 'auto' }}
      onScroll={handleScroll}
    >
      {visibleItems.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
}

These optimization patterns help with:

Reducing unnecessary re-renders
Improving performance with large datasets
Maintaining responsiveness in complex UIs

Conclusion

React Hooks have introduced a paradigm shift in how we write React components, and mastering these patterns can significantly improve your code quality and application performance. From custom hooks for logic reuse to performance optimization techniques, these patterns provide structured approaches to common challenges in React development.

Remember that while these patterns are powerful, they should be applied judiciously. Not every component needs memoization, and not every piece of state needs to be in context. The key is to understand the trade-offs and apply these patterns where they provide the most value.