use-merge-state

🗜️ A useState variant hook that merges updates from arrays, plain objects, maps or sets.

Installation

Skypack

import { useMergeState } from "https://cdn.skypack.dev/use-merge-state"

Yarn

yarn add use-merge-state

npm

npm install use-merge-state

Usage

Import useMergeState.

import { useMergeState } from "use-merge-state"

Use it as a drop-in useState replacement.

const [state, setState] = useMergeState([1, 2])

// state: [1, 2]

Setting arrays, plain objects, maps or sets will merge them with the current state instead of overriding it. Other types will be overridden similarly to useState.

setState([3, 4])

// state: [1, 2, 3, 4]

Returning a functional update will run as expected and its result will then be merged with the current state.

setState((previousState) =>
  previousState.map((previousNumber) => previousNumber * 2)
)

// state: [1, 2, 3, 4, 2, 4, 6, 8]

Options

A secondary options argument can be set either on instances, updates or both to tweak the behavior of useMergeState.

Setting options on a useMergeState instance will set options for all setState updates of this instance.

const [state, setState] = useMergeState([1, 2], {
  merge: false
})

Setting options on a setState update will override any previously set options for this specific update.

setState([3, 4], {
  merge: true
})

merge

merge?: boolean = true

Setting merge to false will disable merging—essentially converting useMergeState back into useState.