Advanced Hook Composition: Building Clean, Scalable React Logic

Previously in this course, we covered Refactoring for Scalability: Professionalizing Your React Architecture to clean up our component trees. Now, we'll take that modularity a step further by focusing on advanced hook composition.

In professional React development, you rarely build a feature using just one primitive. You usually need to orchestrate data-fetching, local UI state, and persistent storage. If you leave all that orchestration inside your component, your code becomes brittle and hard to test. Today, we’ll learn how to wrap these distinct concerns into a single, unified interface.

Understanding Hook Composition

At its core, composition is about taking smaller, focused pieces of logic—which you learned to create in Introduction to Custom Hooks: Master Abstraction in React—and layering them to provide a higher-level API.

Instead of a component knowing about useQuery, useDispatch, and useState simultaneously, it should simply call useDashboardData() or useUserPreferences(). This "black box" approach hides the complexity of how the state is managed or where the data comes from.

The Problem: The "God Component"

Imagine a dashboard widget that needs to fetch user data, toggle a "details" view, and persist that toggle in local storage. Without composition, your component would look like a sprawling mess of useEffect and useState calls. By composing these, we create a predictable, testable layer between our UI and our data layer.

Worked Example: Composing a "Project Manager" Hook

Let’s build a custom hook that manages a specific project’s data. We need to:

1. Fetch data from an API (using our existing data-fetching patterns).
2. Handle a local "editing" state.
3. Sync the editing state with localStorage (using the pattern from Building a useLocalStorage Hook: Persistence & State Management).

JAVASCRIPT
import { useQuery } from CE9178">'@tanstack/react-query';
import { useLocalStorage } from CE9178">'./hooks/useLocalStorage';
import { useState } from CE9178">'react';

export const useProjectManager = (projectId) => {
  // 1. Fetching logic
  const { data, isLoading } = useQuery({
    queryKey: [CE9178">'project', projectId],
    queryFn: () => fetchProject(projectId),
  });

  // 2. Persistence logic
  const [isExpanded, setIsExpanded] = useLocalStorage(CE9178">`project-${projectId}-expanded`, false);

  // 3. Local UI state
  const [isEditing, setIsEditing] = useState(false);

  // Unified interface
  return {
    project: data,
    isLoading,
    isExpanded,
    toggleExpanded: () => setIsExpanded(!isExpanded),
    isEditing,
    setIsEditing,
  };
};

By exposing this single hook, the component doesn't need to know that we are using React Query or local storage. It just consumes the API we've defined.

Hands-on Exercise

For our dashboard project, create a useDashboardMetrics hook.

1. Combine a useQuery call that fetches the last 7 days of activity.
2. Add a useState for a "filter" string (e.g., "all", "active", "archived").
3. Return a filtered version of the data alongside the raw data and the filter setter.

Hint: Do not perform the filtering inside the component. Perform it inside the hook so the component remains "dumb" to the data transformation logic.

Common Pitfalls

1. Over-composing: Don't create a "God Hook" that handles everything in the entire application. Keep your compositions domain-specific (e.g., useAuth, useProject, useTheme).
2. Breaking the Rules of Hooks: Remember that you can only call hooks at the top level. You cannot conditionally call a hook inside your composition if that logic isn't guaranteed to run on every render.
3. Implicit Dependencies: When composing, be careful with dependency arrays. If your composed hook relies on a prop, ensure that prop is passed into the hook, or you’ll end up with stale data references.
4. Performance Issues: Since we are combining multiple hooks, ensure you aren't triggering unnecessary re-renders. If the composed hook returns an object, consider wrapping the return value in useMemo if the consuming components are performance-sensitive.

Recap

Advanced hook composition allows us to:

• Abstract complexity: Hide implementation details from the view layer.
• Maintain clean interfaces: Components interact with domain-specific APIs rather than generic primitives.
• Improve testability: You can test the logic of your composed hook in isolation from the UI.

By moving logic into these unified hooks, you reduce the surface area for bugs and make your codebase significantly easier to navigate as the dashboard grows.

Up next: We will explore Implementing Middleware for State, where we'll learn how to intercept actions to perform logging and complex side-effect orchestration.