Object not extensible when referencing old recoil value in socket.io callback

In a Socket.io callback, I am granular-ly updating a property of a Recoil state object.

I’m doing something similar to

const [toUpdate, setToUpdate] = useRecoilState(someAtom) 
socket.on("this_event", (data: any) => {
    setToUpdate((toUpdate: any) => {

        toUpdate[someArray].push(data)

        return toUpdate
    })
})  

or the syntax

setToUpdate((toUpdate: any) => {

    const newToUpdate = Object.assign({},toUpdate)
    newToUpdate[someArray].push(data)

    return newToUpdate

})

both throw an “object not extensible” error. This sytnax works fine in vanilla React state and was wondering if this is a bug or if there’s a workaround to setting a property of a Recoil state?

I’ve been able to get a temporary workaround by doing

setToUpdate((toUpdate: any) => {

    const newToUpdate = JSON.parse(JSON.stringify(toUpdate))
    newToUpdate[someArray].push(data)

    return newToUpdate

})

since it completely copies the contents, but it is very hacky and in the long term very slow

[drarmstr]

@quuu - Objects stored in Recoil state are frozen by default. We want to ensure that we are capturing all “state changes” to properly update other nodes in the data-flow graph or React components which depend on that state. However, in some cases it may make sense to override this, which you can do so with the dangerouslyAllowMutability option in the atom or selector.

[pnkflydgr]

Just for thoroughness I want to share what I found is a better approach than JSON.parse() for deep cloning.

import { cloneDeep } from "lodash"
...
const [stateObj, setStateObj] = useRecoilState(objAtom)
const nestedChangeHandler = ((...) => {
  let clonedStateObj = cloneDeep(stateObj)
  // update nested properties of clonedStateObj
  setStateObj(clonedStateObj)  
}