Combining Multiple Hooks in a Component

In React, hooks are powerful tools for managing state, side effects, context, and more. While a component can use one hook at a time, you can often combine multiple hooks in a single component to handle different aspects of its behavior. This helps keep the component modular, readable, and easier to manage.

In this article, we’ll explore how to combine multiple hooks like useState, useEffect, useReducer, useContext, and more within a single component. We’ll also look at the advantages of this approach.

1. Why Combine Multiple Hooks?

• Separation of Concerns: Each hook can focus on a specific part of the component’s behavior (e.g., managing state, handling side effects), which leads to cleaner code.
• Readability: Combining hooks makes the code more modular and easier to understand because each hook has a distinct responsibility.
• Reusability: By splitting logic into separate hooks, you can reuse them in other components without duplicating code.

2. Example 1: Combining useState, useEffect, and useReducer

Here’s a practical example of combining useState, useEffect, and useReducer hooks within a component:

import React, { useState, useEffect, useReducer } from 'react';

// Initial state for the reducer
const initialState = { count: 0 };

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
}

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true); // useState for loading state
  const [data, setData] = useState(null); // useState for data fetching
  const [state, dispatch] = useReducer(counterReducer, initialState); // useReducer for counter logic

  useEffect(() => {
    // Simulate an API call
    setTimeout(() => {
      setData({ message: "Data has been loaded" });
      setIsLoading(false);
    }, 2000); // Simulate a delay of 2 seconds
  }, []);

  return (
    <div>
      <h1>Multiple Hooks Example</h1>

      {/* Display Loading */}
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <p>{data.message}</p>
      )}

      {/* Display and control counter */}
      <div>
        <h2>Counter: {state.count}</h2>
        <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
      </div>
    </div>
  );
};

export default MyComponent;

Explanation:

• useState: We’re using useState for the loading state (isLoading) and the data fetched from the API (data).
• useEffect: The useEffect hook simulates an API call and sets the data and loading states.
• useReducer: The useReducer hook manages the counter state (count), which can be incremented, decremented, or reset.

Combining these hooks in one component makes the code easy to maintain and understand, as each hook is responsible for a different part of the component’s behavior.

3. Example 2: Combining useState, useEffect, and useContext

When you need to share state across multiple components, React’s Context API and useContext hook are helpful. Below is an example where multiple hooks (useState, useEffect, and useContext) are combined to manage user authentication.

User Context Setup:

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

// Create a Context
const UserContext = createContext();

export const useUser = () => {
  return useContext(UserContext);
};

// Context Provider component
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

Using the useContext Hook in a Component:

import React, { useState, useEffect } from 'react';
import { useUser } from './UserContext';

const UserProfile = () => {
  const { user, login, logout } = useUser();
  const [isFetching, setIsFetching] = useState(true);

  useEffect(() => {
    // Simulate an API call to fetch user data
    setTimeout(() => {
      login({ name: 'John Doe', email: 'john@example.com' });
      setIsFetching(false);
    }, 2000); // Simulate delay of 2 seconds
  }, [login]);

  return (
    <div>
      <h1>User Profile</h1>
      {isFetching ? (
        <p>Loading user data...</p>
      ) : user ? (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <p>No user logged in</p>
      )}
    </div>
  );
};

export default UserProfile;

Explanation:

• useState: Used to track the fetching state (isFetching).
• useEffect: Simulates an API call to fetch user data, and when the data is retrieved, it updates the user state via the login function from the context.
• useContext: Used to access the user, login, and logout methods from the UserContext. This allows the component to share the user data across multiple components.

4. Example 3: Combining useState, useEffect, and useRef

In some cases, you might want to combine useRef with other hooks. useRef is useful when you want to persist values between renders without causing re-renders.

Here’s an example of combining useState, useEffect, and useRef:

import React, { useState, useEffect, useRef } from 'react';

const TimerComponent = () => {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null); // Ref to store the interval ID

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup interval on component unmount
    return () => clearInterval(intervalRef.current);
  }, []); // Empty dependency array ensures it runs only once on mount

  return (
    <div>
      <h1>Timer: {seconds}s</h1>
    </div>
  );
};

export default TimerComponent;

Explanation:

• useState: Used to track the number of seconds.
• useEffect: Sets up an interval to update the seconds every second.
• useRef: Holds a reference to the interval ID to ensure that the interval is cleaned up when the component is unmounted (prevents memory leaks).

5. Best Practices for Combining Hooks

• Organize Hook Logic: Keep related hooks together. For example, state management hooks (like useState and useReducer) should be grouped together, while side-effect hooks (like useEffect) should be logically separated.
• Custom Hooks: If you combine multiple hooks that are reused across several components, consider extracting that logic into a custom hook. This makes your code more modular and easier to maintain.
• Performance Optimization: Be mindful of the performance impact of hooks like useEffect. Ensure that dependencies are correctly set to avoid unnecessary re-renders.