`useStateWithHistory`

A hook to manage state with an undo/redo history mechanism.

Arguments

defaultValue (any): The initial value for the state.
options (object, optional): Configuration options.
- capacity (number): The maximum number of history entries.

Returns

[value, set, historyState] (array):
- value (any): The current state.
- set (function): Function to update the state and history.
- historyState (object): Object containing history-related functions and state.
  - history (array): Array of historical states.
  - pointer (number): The current position in the history.
  - back (function): Function to go back in history.
  - forward (function): Function to go forward in history.
  - go (function): Function to go to a specific history index.

Hooks Involved

useState
useRef
useCallback

How to Use

import { useState } from "react"
import useStateWithHistory from "./useStateWithHistory"

export default function StateWithHistoryComponent() {
    const [count, setCount, { history, pointer, back, forward, go }] =
        useStateWithHistory(1)
    const [name, setName] = useState("Sergey")

    return (
        <div>
            <div>{count}</div>
            <div>{history.join(", ")}</div>
            <div>Pointer - {pointer}</div>
            <div>{name}</div>
            <button onClick={() => setCount(currentCount => currentCount * 2)}>
                Double
            </button>
            <button onClick={() => setCount(currentCount => currentCount + 1)}>
                Increment
            </button>
            <button onClick={back}>Back</button>
            <button onClick={forward}>Forward</button>
            <button onClick={() => go(2)}>Go To Index 2</button>
            <button onClick={() => setName("John")}>Change Name</button>
        </div>
    )
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!