[Question] how to handle object with un-predefined key

[Mairkur]

Hi, I'm storing in an atom an object with un-predefined key defined by an interface

Interface:

interface SelectedDataObject {
  [x: string]: SelectedDataProps;
}

Atom:
const myAtom = atom<SelectedDataObject>({})

This kind of object allow to me define in run time the key of the object :

const [value, updateValue] = useAtom(anAtom)

let editedValue = {...value}
editedValue[key] = {data: 'xxx'}
updateValue(editedValue)

This work pretty well in the first "run" but if after a while I reset the atom and update it again like previously

const [value, updateValue] = useAtom(anAtom)
updateValue({})

//after receiving and event 
const [value, updateValue] = useAtom(anAtom)

let editedValue = {...value}
editedValue[key] = {data: 'yyy'}
updateValue(editedValue)

Next doesn't detect the change in the atom and my component receive undefined data when i'm trying to access data in a specified key. It's like Next doesn't understand that the atom value changed.

To badly fix this everytime I update my atom i also update an atom that store a number with a new one, therefore causing a rerender in the page where I need my main atom value.

So How should I handle this kind of object in an atom ?

[dai-shi]

From the code snippets, I think you understand the usage correctly, and I'm not sure how it's causing unexpected behavior. Would you be able to create a minimal reproduction with codesandbox without Next.js?