Unexpected "Detected store mutation during atom read" message triggered

[dhenneke]

Bug Description

We have some trouble with the latest jotai updates (wanted to upgrade jotai 2.15.1->2.16.1 and jotai-effect 2.1.3->2.2.3) that include #3179. This warning is triggered in our code although I can't see an obvious reason for that.

I was able to generate this minimal example (also linked as a codesandbox):

import { atom, createStore } from "jotai";
import { withAtomEffect } from "jotai-effect";
import { unwrap } from "jotai/utils";

const documentRefAtom = atom(Promise.resolve("Hallo"));

const valueAtom = atom(async (get) => {
  await get(documentRefAtom);

  // TODO: we do something with it here async
});

const atomEffect1 = withAtomEffect(valueAtom, (get) => {
  get(unwrap(documentRefAtom));

  // TODO: we subscribe somewhere that uses the value
});

const store = createStore();
store.sub(atomEffect1, () => {});

// This triggers "Detected store mutation during atom read. This is not supported." in the console

It seems to have been connected to:

1. An atom is read in another atom.
2. The same atom is consumed with unwrap in an effect added via withAtomEffect.

Once I remove either of the two get(...) lines or the unwrap, the error disappears. This also happens when I replace unwrap with loadable.

I'm not sure if this is an issue of jotai or jotai-effect so I decided to open a thread here. I hope anyone here has a clue on why this happens and how this can be resolved.

For context: We use vitest-fail-on-console in our tests and now this is triggered all across our app since we use this pattern for reading/subscribing data from firestore.

Reproduction Link

https://codesandbox.io/p/sandbox/h5vw53?file=%2Fsrc%2Fjotai-example.tsx

[dhenneke]

Just went through my debug output again and I think these two places cause this.

They actually violate the rule by calling set in the getter:

jotai/src/vanilla/utils/unwrap.ts

Lines 51 to 56 in 83dce49

	refreshAtom.INTERNAL_onInit = (store) => {
	store.set(refreshAtom, ([, c]) => [
	() => store.set(refreshAtom, ([f, c]) => [f, c + 1]),
	c,
	])
	}

jotai/src/vanilla/utils/unwrap.ts

Lines 77 to 86 in 83dce49

	promise.then(
	(v) => {
	promiseResultCache.set(promise, v as Awaited<Value>)
	triggerRefresh()
	},
	(e) => {
	promiseErrorCache.set(promise, e)
	triggerRefresh()
	},
	)

[dai-shi]

#3179 (comment)
We tried "throw" instead of warning and nothing broke... cc @dmaskasky

[dhenneke]

I found an even easier reproducer:

const example = atom('Hello')

const store = createStore()

store.get(example)

const unwrapAtom = unwrap(example)
store.get(unwrapAtom)

So this seems to happen if the atom that is unwrapped was already read before and has an existing value.

---

I instrumented the code with log messages and got the following result. Seems like there are multiple in-flight reads happening in parallel while one of them is writing eventually and letting the reads up in the stack fail:

// #<number> is the number of the `BUILDING_BLOCK_readAtomState` call.

 --- READ example --- 
!!! CLEAR THE MUTATION SET #0
!!! READ THE ATOM #0 exampleAtom
!!! READ THE ATOM END - after valueOrPromise #0 exampleAtom Hello
!!! READ THE ATOM END - after warning check #0 exampleAtom Hello
 --- ENDREAD example --- 


 --- READ unwrapAtom --- 
!!! CLEAR THE MUTATION SET #1
!!! READ THE ATOM #1 unwrapAtom
!!! CLEAR THE MUTATION SET #2
!!! READ THE ATOM #2 exampleAtom:promiseAndValueAtom
!!! CLEAR THE MUTATION SET #3
!!! READ THE ATOM #3 exampleAtom:refreshAtom
!!! READ THE ATOM END - after valueOrPromise #3 exampleAtom:refreshAtom [ [Function (anonymous)], 0 ]
!!! READ THE ATOM END - after warning check #3 exampleAtom:refreshAtom [ [Function (anonymous)], 0 ]
!!! ADD THE MUTATION SET exampleAtom:refreshAtom
!!! READ THE ATOM END - after valueOrPromise #2 exampleAtom:promiseAndValueAtom { v: 'Hello' }
Detected store mutation during atom read. This is not supported.
!!! READ THE ATOM END - after warning check #2 exampleAtom:promiseAndValueAtom { v: 'Hello' }
!!! READ THE ATOM END - after valueOrPromise #1 unwrapAtom Hello
Detected store mutation during atom read. This is not supported.
!!! READ THE ATOM END - after warning check #1 unwrapAtom Hello
 --- ENDREAD unwrapAtom --- 

[dai-shi]

Thanks for the minimal reproduction!

[dai-shi]

#3213 should fix it. Thanks for reporting this!

[KeepALifeUS]

Analysis & Workaround

This happens because unwrap internally calls store.set() to initialize the unwrapped value, which conflicts with the read phase.

The Flow:

1. atomEffect1 reads valueAtom (triggers async read)
2. Inside effect, unwrap(documentRefAtom) is called
3. unwrap tries to set fallback value → mutation during read

Workaround 1: Separate the unwrap

// Create unwrapped atom outside the effect
const unwrappedDocRef = unwrap(documentRefAtom);

const atomEffect1 = withAtomEffect(valueAtom, (get) => {
  get(unwrappedDocRef);  // Read pre-unwrapped atom
});

Workaround 2: Use loadable with check

import { loadable } from "jotai/utils";

const loadableDocRef = loadable(documentRefAtom);

const atomEffect1 = withAtomEffect(valueAtom, (get) => {
  const result = get(loadableDocRef);
  if (result.state === "hasData") {
    // Use result.data
  }
});

Workaround 3: Defer with setTimeout

const atomEffect1 = withAtomEffect(valueAtom, (get, set) => {
  setTimeout(() => {
    get(unwrap(documentRefAtom));
  }, 0);
});

Root Cause

This seems like a timing issue between jotai-effect and unwrap. The effect runs during atom read phase, but unwrap needs to mutate. Consider opening an issue on jotai-effect repo with this minimal repro.

Workaround 1 should be the cleanest fix for your case.

[dmaskasky]

Does this happen in the latest version of Jotai? A fix to unwrap was released to a recently.