Serif COLAKEL

Posted on Dec 1

useCustomReducer Hook: A Versatile State Management Tool

#webdev #javascript #react #reactnative

Introduction

State management in React can be tricky, especially when dealing with complex or nested state structures. To simplify this, the useCustomReducer hook combines the power of useReducer with a flexible API for updating state in a clean, declarative way. This hook supports primitive, nested, and array states, making it suitable for a wide range of use cases.

In this article, we'll explore the useCustomReducer hook and its core methods for managing state in React applications. We'll cover the definition of the hook, its method signatures, and detailed usage examples for different types of state structures. By the end, you'll have a solid understanding of how to use the useCustomReducer hook to handle complex state in your React components.

Introduction
Table of Contents
Hooks Overview
React Component Example
Features
Definition
- Method Definitions
Detailed Usage Examples
Why Use useCustomReducer?
Conclusion
Additional Resources

Hooks Overview

The useCustomReducer hook is a custom React hook that provides a simple and flexible way to manage complex state structures. It combines the benefits of useReducer with a clean API for updating state values. This hook is designed to handle various types of state, including primitive values, objects, arrays, and nested data structures.

Here's an overview of the useCustomReducer hook:

Core Methods:
- set: Update state values directly or via a callback function.
- reset: Revert state to its initial value.
- merge: Merge partial updates into the existing state.
State Structures: - Supports primitive values (e.g., numbers, strings, booleans). - Handles object-based state structures (e.g., form data, user profiles). - Manages array-based state structures (e.g., lists, collections).
Type-Safe: - Fully typed using TypeScript for reliable development and error prevention.
Simple API: - Provides intuitive methods for updating, resetting, and merging state values. - Supports direct updates and callback functions for dynamic state changes.

import { useReducer, useCallback, useMemo } from "react";

type Primitive = boolean | string | number | Date | null | undefined;
type NestedObject = { [key: string]: Primitive | NestedObject | NestedArray };
type NestedArray = Array<Primitive | NestedObject>;

type State = Primitive | NestedObject | NestedArray;

type Action<T> =
  | { type: "SET"; payload: Partial<T> | ((prevState: T) => Partial<T>) }
  | { type: "RESET"; payload?: T }
  | { type: "MERGE"; payload: Partial<T> };

function useCustomReducer<T extends State>(initialState: T) {
  const reducer = useCallback(
    (state: T, action: Action<T>): T => {
      switch (action.type) {
        case "SET":
          const newPayload =
            typeof action.payload === "function"
              ? action.payload(state)
              : action.payload;
          if (newPayload instanceof Date) {
            return newPayload as T;
          }
          if (
            typeof state === "object" &&
            !Array.isArray(state) &&
            state !== null
          ) {
            return { ...state, ...newPayload };
          }
          return newPayload as T;
        case "RESET":
          return action.payload ?? initialState;
        case "MERGE":
          if (
            typeof state === "object" &&
            !Array.isArray(state) &&
            state !== null
          ) {
            return { ...state, ...action.payload };
          }
          return action.payload as T;
        default:
          throw new Error("Invalid action type");
      }
    },
    [initialState]
  );

  const [state, dispatch] = useReducer(reducer, initialState);

  const set = useCallback(
    (payload: Partial<T> | ((prevState: T) => Partial<T>)) =>
      dispatch({ type: "SET", payload }),
    []
  );
  const reset = useCallback(
    (payload?: T) => dispatch({ type: "RESET", payload }),
    []
  );
  const merge = useCallback(
    (payload: Partial<T>) => dispatch({ type: "MERGE", payload }),
    []
  );

  const memoizedState = useMemo(() => state, [state]);

  return [memoizedState, { set, reset, merge }] as const;
}

export default useCustomReducer;

The useCustomReducer hook is implemented using the useReducer hook from React. It defines a custom reducer function that handles different types of actions to update, reset, or merge state values. The hook provides three core methods set, reset, and merge to interact with the state. The set method can accept either an object with new state values or a callback function to compute the next state. The reset method reverts the state to its initial value, while the merge method merges partial updates into the existing state.

React Component Example

Here's an example of using the useCustomReducer hook in a React component to manage a simple counter state:

import useCustomReducer from "./use-custom-reducer";
import { faker } from "@faker-js/faker";
import { Button } from "@/components/ui/button";

export default function Use() {
  const [formValues, { set, reset, merge }] = useCustomReducer({
    name: faker.person.firstName(),
    age: faker.number.int({ min: 18, max: 99 }),
    address: {
      street: faker.location.streetAddress(),
      city: faker.location.city(),
      state: faker.location.state(),
      zip: faker.location.zipCode(),
    },
    hobbies: [faker.person.bio(), faker.person.bio(), faker.person.bio()],
  });

  const [bool, { set: setBool }] = useCustomReducer<boolean>(
    faker.datatype.boolean()
  );
  const [num, { set: setNum }] = useCustomReducer(faker.number.int());
  const [str, { set: setStr }] = useCustomReducer<string>(faker.lorem.word());
  const [date, { set: setDate }] = useCustomReducer(faker.date.recent());
  const [nil, { set: setNil }] = useCustomReducer(null);
  const [undef, { set: setUndef }] = useCustomReducer(undefined);
  const [arr, { set: setArr }] = useCustomReducer([
    faker.number.int(),
    faker.number.int(),
    faker.number.int(),
  ]);
  const [nestedArr, { set: setNestedArr }] = useCustomReducer([
    faker.number.int(),
    faker.lorem.word(),
    { three: faker.number.float() },
  ]);

  const [obj, { set: setObj }] = useCustomReducer({
    a: faker.number.int(),
    b: faker.number.int(),
    c: faker.number.int(),
  });
  const [nestedObj, { set: setNestedObj }] = useCustomReducer({
    a: faker.number.int(),
    b: faker.lorem.word(),
    c: { three: faker.number.float() },
  });

  return (
    <div className="p-4 space-y-6">
      <h1 className="text-2xl font-bold">Use</h1>
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Form Values</h2>
        <p className="text-gray-500">{JSON.stringify(formValues)}</p>
        <Button onClick={() => set({ name: faker.person.firstName() })}>
          Set Name
        </Button>
        <Button
          onClick={() => set((prevState) => ({ age: prevState.age - 1 }))}
        >
          Decrement Age
        </Button>
        <Button
          onClick={() => set((prevState) => ({ age: prevState.age + 1 }))}
        >
          Increment Age
        </Button>
        <Button
          onClick={() =>
            set((prevState) => ({
              address: {
                ...prevState.address,
                street: faker.location.streetAddress(),
              },
            }))
          }
        >
          Set Street
        </Button>
        <Button onClick={() => reset()}>Reset</Button>
        <Button
          onClick={() => merge({ age: faker.number.int({ min: 18, max: 99 }) })}
        >
          Merge
        </Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Boolean Value</h2>
        <p className="text-gray-500">{bool.toString()}</p>
        <Button onClick={() => setBool(faker.datatype.boolean())}>
          Set Bool
        </Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Number Value</h2>
        <p className="text-gray-500">{num.toString()}</p>
        <Button onClick={() => setNum(faker.number.int())}>Set Num</Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">String Value</h2>
        <p className="text-gray-500">{str}</p>
        <Button onClick={() => setStr(faker.lorem.word())}>Set Str</Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Date Value</h2>
        <p className="text-gray-500">{JSON.stringify(date)}</p>
        <Button onClick={() => setDate(faker.date.recent())}>Set Date</Button>
        <Button onClick={() => setDate(new Date("2022-01-01"))}>
          Set Date to 2022
        </Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Nil and Undefined</h2>
        <p className="text-gray-500">{String(nil)}</p>
        <Button onClick={() => setNil(null)}>Set Nil</Button>
        <p className="text-gray-500">{String(undef)}</p>
        <Button onClick={() => setUndef(undefined)}>Set Undef</Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Array Value</h2>
        <p className="text-gray-500">{arr.toString()}</p>
        <Button
          onClick={() =>
            setArr([faker.number.int(), faker.number.int(), faker.number.int()])
          }
        >
          Set Arr
        </Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Nested Array</h2>
        <p className="text-gray-500">{JSON.stringify(nestedArr)}</p>
        <Button
          onClick={() =>
            setNestedArr([
              faker.number.int(),
              faker.lorem.word(),
              { three: faker.number.float() },
            ])
          }
        >
          Set Nested Arr
        </Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Object Value</h2>
        <p className="text-gray-500">{JSON.stringify(obj)}</p>
        <Button
          onClick={() =>
            setObj({
              a: faker.number.int(),
              b: faker.number.int(),
              c: faker.number.int(),
            })
          }
        >
          Set Obj
        </Button>
      </div>
      <hr className="border-t border-gray-300" />
      <div className="space-x-2 space-y-2">
        <h2 className="text-lg font-semibold">Nested Object</h2>
        <p className="text-gray-500">{JSON.stringify(nestedObj)}</p>
        <Button
          onClick={() =>
            setNestedObj({
              a: faker.number.int(),
              b: faker.lorem.word(),
              c: { three: faker.number.float() },
            })
          }
        >
          Set Nested Obj
        </Button>
      </div>
    </div>
  );
}

Features

Supports Diverse State Structures: Handles primitives, objects, arrays, and nested data structures.
Simple API:
- set: Update state values directly or via a callback.
- reset: Revert state to its initial value.
- merge: Merge partial updates into the existing state.
Type-Safe: Fully typed using TypeScript for reliable development.

Definition

The useCustomReducer hook is a custom React hook for managing complex state. It provides three core methods set, reset, and merge to handle primitive, nested, and array-based state structures. Here's a breakdown of the hook and its methods:

function useCustomReducer<T extends State>(
  initialState: T
): [
  T,
  {
    set: (payload: Partial<T> | ((prevState: T) => Partial<T>)) => void;
    reset: (payload?: T) => void;
    merge: (payload: Partial<T>) => void;
  }
];

Method Definitions

set
- Updates the state by replacing or partially updating its properties.
- Accepts either:
- An object with new state values.
- A callback function (prevState) => Partial to compute the next state.

Example

const [state, { set }] = useCustomReducer({ count: 0 });

set((prevState) => ({ count: prevState.count + 1 }));

reset
- Resets the state to the initial state or a specified value.
- Accepts an optional payload to replace the initial state.

Example

reset(); // Resets to initial state.

reset({ name: "John", age: 25 }); // Resets to a new state.

merge
- Merges partial updates into the existing state.
- Accepts an object with partial state updates.
- Only works for objects and nested state structures.

Example

merge({ city: "New York" }); // Adds or updates the 'city' field.

Detailed Usage Examples

The useCustomReducer hook is versatile and can be used to manage various types of state structures. Here are some examples to demonstrate its usage with different types of state:

Managing Primitives

Number:

const initialState = 0;

const [count, { set, reset }] = useCustomReducer(initialState);

Usage:
- Increment the Count:
```
set((prevState) => prevState + 1);
```
- Reset to Initial State:
```
reset();
```
- Set a New Value:
```
  set(10);
```
String:

const initialState = "Hello, World!";

const [message, { set, reset }] = useCustomReducer(initialState);

Usage:
- Update the String:
```
set("Hello, React!");
```
- Reset to Initial State:
```
reset();
```
Boolean:

const initialState = false;

const [isToggled, { set, reset }] = useCustomReducer(initialState);

Usage:
- Toggle the Boolean:
```
set((prevState) => !prevState);
```
- Reset to Initial State:
```
reset();
```
- Set a New Value:
```
  set(true);
```
Date:

const initialState = new Date();

const [date, { set, reset }] = useCustomReducer(initialState);

Usage:

Update the Date:

set(new Date("2022-01-01"));

Reset to Initial State:

reset();

Set a New Value:

set(new Date("2023-01-01"));

Null and Undefined States:

const initialState: string | null = null;
const initialState: string | undefined = undefined;

const [value, { set, reset }] = useCustomReducer(initialState); // Implicitly infer the type.
const [value, { set, reset }] = useCustomReducer<string | undefined>(
  initialState
); // Explicitly define the type.

Usage:
- Set a New Value:
```
set("New Value");
```
- Reset to Initial State:
```
reset();
```
- Set a New Value:
```
set("New Value");
```

Managing Form Data

Initial State:

const initialState = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Sample City",
    state: "CA",
  },
};

const [formData, { set, reset, merge }] = useCustomReducer(initialState);

Usage:

Set a New Name:

set({ name: "Jane Doe" });

Update Address Partially:

set((prevState) => ({
  address: {
    ...prevState.address,
    city: "New City",
  },
}));

Set a New Name:

set({ name: "Jane Doe" });

Update the City:

merge({ address: { city: "New York" } });

Merge Additional Fields:

merge({ phone: "123-456-7890" });

Reset to Initial State:

reset();

Managing Arrays

Initial State:

const initialState = [1, 2, 3, 4, 5];

const [numbers, { set, reset, merge }] = useCustomReducer(initialState);

Usage:

Add a New Element:

set((prevState) => [...prevState, 6]);

Remove an Element:

set((prevState) => prevState.filter((item) => item !== 3));

Reset to Initial State:

reset();

Set a New Value:

  set([10, 20, 30]);

Merge Additional Elements:

  merge([6, 7, 8]);

Initial State for Nested Arrays:

const initialState = {
  users: [
    { name: "John Doe", age: 30 },
    { name: "Jane Doe", age: 25 },
  ],
};

const [data, { set, reset, merge }] = useCustomReducer(initialState);

Usage:

Add a New User:

set((prevState) => ({
  users: [...prevState.users, { name: "Alice", age: 35 }],
}));

Remove a User:

set((prevState) => ({
  users: prevState.users.filter((user) => user.name !== "John Doe"),
}));

Reset to Initial State:

reset();

Set a New Value:

set({
  users: [
    { name: "Alice", age: 35 },
    { name: "Bob", age: 40 },
  ],
});

Merge Additional Users:

merge({
  users: [
    { name: "Charlie", age: 45 },
    { name: "David", age: 50 },
  ],
});

Managing Nested State

Initial State:

const initialState = {
  user: {
    name: "John Doe",
    age: 30,
  },
  address: {
    street: "123 Main St",
    city: "Sample City",
    state: "CA",
  },
};

const [data, { set, reset, merge }] = useCustomReducer(initialState);

Usage:

Update User's Age:

set((prevState) => ({
  user: {
    ...prevState.user,
    age: 31,
  },
}));

Update the City:

merge({ address: { city: "New York" } });

Reset to Initial State:

reset();

Set a New Value:

set({
  user: { name: "Jane Doe", age: 25 },
  address: { city: "New York" },
});

Why Use useCustomReducer?

Flexible State Management:
- Supports various state structures, making it suitable for different use cases.
- Handles primitive, nested, and array-based states with ease.
- Provides methods to update, reset, and merge state values.
Simple API:
- Provides intuitive methods to update, reset, and merge values.
- Supports direct updates and callback functions for dynamic state changes.
- Offers a clean and declarative way to manage state in React components.
Cleaner Code:
- Reduces boilerplate code by handling complex state structures efficiently.
- Avoid repetitive useState declarations and directly handle complex state.
- Manage all types of state (primitive, object, array, etc.) with one hook.
Type-Safe:
- Fully typed using TypeScript for reliable development and error prevention.
Dynamic Updates:
- Use the set method with functions to compute next-state dynamically.

Conclusion

The useCustomReducer hook is a powerful tool for managing complex state structures in React applications. By combining the flexibility of useReducer with a simple API for updating state, this hook simplifies state management and reduces boilerplate code. Whether you're dealing with primitive values, nested objects, or arrays, the useCustomReducer hook provides a clean and declarative way to handle state changes. Try it out in your next project and experience the benefits of versatile state management with ease.

DEV Community

useCustomReducer Hook: A Versatile State Management Tool

Introduction

Table of Contents

Hooks Overview

React Component Example

Features

Definition

Method Definitions

Example

Example

Example

Detailed Usage Examples

Managing Primitives

Managing Form Data

Managing Arrays

Managing Nested State

Why Use useCustomReducer?

Conclusion

Additional Resources

Top comments (0)

Read next

How to Toggle Auto-Completion in Cursor Editor 🎉

Removing code smells: Using dependency injection through Props in React

Create a Infinite Scrolling Marquee with HTML and CSS

While Loops