Concurrency problem

[BowgartField]

Hi,
I have a atom value storing a dictionnary:
export const validators = atom<{}>({})

This atom is used in same <MyComponent/> created like that:
XXX.map(x => <MyComponent x={x}/> . So they are initialized at "same time".
I use this atom in useEffect() at init of <MyComponent/> and this create a concurency problem because they are trying to update the same atom at same time.
The result is that only last component created by map() function write his value in dictionnary in validators atom.
Do you have any advice ?
Thanks !

EDIT: Also receiving this error in console (But in don't know if it's related):

[dai-shi]

Can you show more of your code? How does the atom used in the component?
You can't update the atom value in render function.

[BowgartField]

Yes.
This is the atom:
export const deployContentValidators = atom<{}>({})

The Component (I simplified it):

[dai-shi]

Can you try this?

const setValidator = async (value) => {
  // ...
  await setValidators((prev) => ({ ...prev, [fieldId]: value }))
}

I think it's a general React gotcha. It can happen with useState too.
The eslint rule should warn you missing setValidator in useEffect deps.

[BowgartField]

Thanks that works !
Yes elsint warn me but if i add setValidor it creates a infinit rendering.

[dai-shi]

You can use useCallback to avoid the infinite loop, now because it doesn't depend on validators variable.