React hooks patterns and React context vs Redux integration

Introduction

React has evolved significantly since its inception, with hooks and context API revolutionizing state management and component logic. As applications grow in complexity, developers often face the dilemma of choosing between React Context and Redux for state management, while also leveraging hooks to create cleaner, more maintainable code.

This post explores common React hooks patterns, compares React Context with Redux, and provides practical guidance on when to use each approach. Whether you're building a small application or a large-scale project, understanding these concepts will help you make informed architectural decisions.

---

Common React Hooks Patterns

Hooks introduced in React 16.8 allow functional components to manage state and side effects. Here are some widely used patterns:

1. Custom Hooks for Reusable Logic

Custom hooks encapsulate logic that can be shared across components. For example, a useFetch hook can abstract data-fetching logic:

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 hook can then be reused across multiple components, reducing boilerplate.

2. State Management with useReducer

For complex state logic, useReducer is a powerful alternative to useState. It works similarly to Redux reducers:

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

---

React Context vs. Redux: When to Use Each

Both React Context and Redux solve state management challenges, but they serve different purposes.

1. React Context: Lightweight and Built-in

React Context is ideal for passing data deeply through the component tree without prop drilling. It shines in scenarios like theme management or user authentication.

Example of a Theme Context:

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

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

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

export function useTheme() {
  return useContext(ThemeContext);
}

Pros:

• No external dependencies.
• Simple API for sharing state across components.
• Works well for low-frequency updates (e.g., themes, user preferences).

Cons:

• Not optimized for high-frequency updates (can cause unnecessary re-renders).
• Lacks built-in middleware (like Redux Thunk or Saga).

2. Redux: Predictable State Container

Redux is better suited for large applications with complex state interactions, undo/redo functionality, or when you need middleware for side effects.

Example Redux setup:

import { createStore } from 'redux';

// Reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Store
const store = createStore(counterReducer);

// Dispatch actions
store.dispatch({ type: 'INCREMENT' });

Pros:

• Centralized state management.
• Time-travel debugging with Redux DevTools.
• Middleware support for async logic (e.g., Redux Thunk).

Cons:

• Boilerplate-heavy setup.
• Steeper learning curve compared to Context.

---

Integrating Redux with React Hooks

Modern Redux (with Redux Toolkit) integrates seamlessly with hooks, reducing boilerplate. Here’s how to use Redux in a React app with hooks:

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Redux slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
  },
});

// Store
const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

// Component using hooks
function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>
        Increment
      </button>
      <span>{count}</span>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>
        Decrement
      </button>
    </div>
  );
}

// Wrap app with Provider
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

This approach minimizes boilerplate while retaining Redux’s benefits.

---

Conclusion

Choosing between React Context and Redux depends on your application’s needs:

• Use Context for simple, static, or low-frequency state updates (themes, user auth).
• Use Redux for complex state, high-frequency updates, or when middleware is required.

Hooks like useReducer and useContext can bridge the gap, allowing you to manage state effectively without always needing Redux. For new projects, consider starting with Context and hooks, then adopt Redux only if necessary.

By mastering these patterns, you can build scalable, maintainable React applications with clean state management.