Guide
Reference
Roadmap
Guide
Reference
Roadmap

useClonedState

Tags:
State

A React Hook for creating a cloned state that supports modification, synchronous operation, and isolation from each other, with support for custom clone functions, defaulting to JSON.parse(JSON.stringify(source)).

Scenes

  • Data state cloning and isolation scenario: Implements deep cloning of data to create separate states for editing without affecting the original data
  • Edit history tracking scenario: Maintains a history of data edits to support undo and redo functions
  • Data comparison scenario: Offers functionality to compare original and modified data
  • ...

Demo

Source
State:
{ "name": "shined", "age": 18 }
Cloned state:
{ "name": "shined", "age": 18 }
name:

Usage

const [form, setForm] = useSafeState({ name: 'react-use', description: 'An awesome react hooks library.', }) const [cloned, setCloned, syncSource] = useClonedState(form) // Modify the clone state directly, i.e., "edit the form", data is isolated from the source state const handleModify = (e: React.ChangeEvent<HTMLInputElement>) => { setCloned((cloned) => ({ ...cloned, [e.target.name]: e.target.value, })) } // Use the current state of the clone as the new form state, i.e., "save changes" const handleSave = () => setForm(cloned) // Synchronize (reset) the source state with the clone state, i.e., "undo changes" const handleReset = () => syncSource()

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const [cloned, setCloned, syncSource] = useClonedState(source, options)

Source

Any valid JavaScript data type, such as string, number, object, array, etc.

Options

export type UseClonedStateOptions = { /** * Clone function * * @defaultValue defaultCloneFn (Implemented simply using JSON.parse(JSON.stringify(source))) */ clone?: <T>(source: T) => T /** * Whether to manually trigger the synchronize (syncSource) function when the input state changes, defaulting to manual. * * @defaultValue true */ manual?: boolean /** * Whether to perform a deep comparison of the input state and trigger the synchronize (syncSource) function only if the deep comparison result is false. * * deep comparison is enabled by default * * @defaultValue true */ deep?: boolean }

Returns

export type UseClonedStateReturns<T> = readonly [ /** * Cloned state */ cloned: T, /** * Set cloned state */ setCloned: ReactSetState<T>, /** * Synchronize cloned state with source state */ syncSource: () => void, ]