I am using zustand for global state management with react and typescript. The question is how to handle the state update and reset effectively, for example when patch request scenarios where user might change input value but cancel that request. For example, let’s say we got useStore.ts like below:

import { create } from "zustand"


type StoreType = {
  // 1. first set of values for existing user data from server
  name: string | undefined
  selectedNode: Node[] | undefined

  // 2. Prepare new set of values for temporary
  newName: string | undefined
  newSelectedNode: Node[] | undefined

  ... (setState stuff)
}

export const useStore = create<StoreType>((set) => ({
  name: undefined,
  selectedNode: undefined,
  newName: undefined,
  newSelectedNode: undefined,

  .... (setState stuff)
}))

I am currently duplicating the backup stuff then assign the state value from global store so that we do not break exisiting data (like from server) when user cancel request or such.

  const {name} = useStore()
  const [backupName, setBackupName] = useState<string>(name)

  <Input
              type="text"
              value={backupResourceName}
              placeholder={`Enter new name`}
              onChange={(e) => setBackupName(e.target.value)}
            />

I feel it is not the efficient way since if we have several values, we need to create more backup – what is the typical handling of this kind of scenarios?

I came up just create newName global state within the zustand declaration like above but which is more common?