Getting collisions between atoms while using next.js

[Esya]

In my app, I've been having some strange collisions where data from some atoms seem to pollute other atoms, all coming from the same atom factory function.

I've made a very simple reproduction codesandbox here
There's also the git repository here

When my factory generates an atom pair, during SSR, the values of the atoms get mixed up

import { Atom, atom } from "jotai";
import { unwrap } from "jotai/utils";

export const atomWithSwr = <T>(
  baseAtom: Atom<T>
): Atom<T | Promise<T>> => {
	const unwrappedAtom = unwrap(baseAtom, prev => prev);
	return atom(get => get(unwrappedAtom) ?? get(baseAtom));
};

export const makeAtomPair = (value: string) => {
	const asyncAtom = atom(async (get) => {
		await new Promise((resolve) => setTimeout(resolve, 2000))
		return value
	})

	const asyncFirstAtom = atomWithSwr(asyncAtom)

	return [asyncAtom, asyncFirstAtom]
}

The makeAtomPair function :

• Generates an asyncAtom (this is where I normally use atomWithSuspenseQuery),
• Then generates the matching stale-while-revalidate atom, taken straight from Async atom that suspends the first time, returns previous value subsquently #2228 - in my actual code I do more things where it actually makes sense to have this factory that generates the matching related atoms

When running the code below, while generating two distinct pairs, the value of the first atom "goes into" the second one as shown in the logs

"use client"

import { Provider, useAtomValue } from "jotai";
import { atomWithSwr, makeAtomPair } from "./atoms";
import { Suspense, useMemo } from "react";


const [asyncAtom1, asyncFirstAtom1] = makeAtomPair('This is my first message')
const [asyncAtom2, asyncFirstAtom2] = makeAtomPair('This is my second message')

export default function Home() {
  console.log("Rendering home")
  return (
    <Provider>
      <div>
        <Suspense fallback="Loading">
          <DisplayAtomsBug />
        </Suspense>
      </div>
    </Provider>
  );
}

const DisplayAtomsBug = () => {
  const atom1 = useAtomValue(asyncFirstAtom1)
  const atom2 = useAtomValue(asyncFirstAtom2)
  
  console.log("Bugged", {atom1, atom2})

  return (
    <>
      <h1 className="font-bold">This example fails</h1>
      <p className="pb-10">It prints "This is my first message" twice in the server console</p>
      <div>{atom1}</div>
      <div>{atom2}</div>
    </>
  )
}

Bugged {
  atom1: 'This is my first message',
  atom2: 'This is my first message'
}

(Reminder: This happens in the server console, before it's sent to the client)
I'm at a complete loss as to what could be doing this...! Also, when the issue occurs, there's referential equality between the two values for some reason that escapes me

  const atom1 = useAtomValue(asyncFirstAtom1)
  const atom2 = useAtomValue(asyncFirstAtom2)

  atom1 === atom2 // Returns true

Any help would be greatly appreciated

[cwstra]

Don't quite have a full explanation here, but I did find some interesting results.

Note the current return value of useAtomValue:

export function useAtomValue<Value>(atom: Atom<Value>, options?: Options) {
 ...
  return isPromiseLike(value) ? use(value) : (value as Awaited<Value>)
}

where use is either React.use, or a shim. In @Esya's example repository, it's React.use.

While playing around with this example, I tried swapping this return for a consistent call to use.

export function useAtomValueAlt<Value>(atom: Atom<Value>, options?: Options) {
 ...
  return use(isPromiseLike(value) ? value : (async () => value as Awaited<Value>))
}

which does not display the buggy behavior.

const DisplayAtomsWorking = () => {
  const atom1 = useAtomValueAlt(asyncFirstAtom1)
  const atom2 = useAtomValueAlt(asyncFirstAtom2)
  
  console.log("Working Alt", {atom1, atom2})

  return (
    <>
      <h1 className="font-bold">This example works!</h1>
      <div>{atom1}</div>
      <div>{atom2}</div>
    </>
  )
}

Another interesting phenomenon is that the bug seems to only occur if there are an even number of atoms called:

const [asyncAtom1, asyncFirstAtom1] = makeAtomPair('This is my first message')
const [asyncAtom2, asyncFirstAtom2] = makeAtomPair('This is my second message')
const [asyncAtom3, asyncFirstAtom3] = makeAtomPair('This is my third message')
const [asyncAtom4, asyncFirstAtom4] = makeAtomPair('This is my fourth message')

const Display2AtomsBugged = () => {
  const atom1 = useAtomValue(asyncFirstAtom1)
  const atom2 = useAtomValue(asyncFirstAtom2)
  
  console.log("2 Bugged", {atom1, atom2})

  return (
    <>
      <h1 className="font-bold">This example fails</h1>
      <p className="pb-10">It prints "This is my first message" twice in the server console</p>
      <div>{atom1}</div>
      <div>{atom2}</div>
    </>
  )
}

const Display3AtomsWorking = () => {
  const atom1 = useAtomValue(asyncFirstAtom1)
  const atom2 = useAtomValue(asyncFirstAtom2)
  const atom3 = useAtomValue(asyncFirstAtom3)
  
  console.log("3 Working", {atom1, atom2, atom3})

  return (
    <>
      <h1 className="font-bold">This example works!</h1>
      <div>{atom1}</div>
      <div>{atom2}</div>
      <div>{atom3}</div>
    </>
  )
}

const Display4AtomsWorking = () => {
  const atom1 = useAtomValue(asyncFirstAtom1)
  const atom2 = useAtomValue(asyncFirstAtom2)
  const atom3 = useAtomValue(asyncFirstAtom3)
  const atom4 = useAtomValue(asyncFirstAtom4)
  
  console.log("4 Bugged", {atom1, atom2, atom3, atom4})

  return (
    <>
      <h1 className="font-bold">This example fails</h1>
      <p className="pb-10">It prints "This is my first message" twice in the server console</p>
      <div>{atom1}</div>
      <div>{atom2}</div>
      <div>{atom3}</div>
      <div>{atom4}</div>
    </>
  )
}

[dai-shi]

Great to know that.
In that case, it's probably a design limitation.

There might be something that Jotai can do, but I'm not sure at the moment.
We can investigate it further, but a little concern of mine is React may change the behavior.

[cwstra]

For sake of completeness, I've managed to replicate the bugged behavior without Jotai:

"use client";

import { Suspense, use } from "react";

export default function Home() {
  console.log("Rendering home");
  return (
    <div>
      <Suspense fallback="Loading">
        <DisplayPromiseBug />
      </Suspense>
    </div>
  );
}

const fst = "This is my first value";
const snd = "This is my second value";
const delayedValue = async (value: string) => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return value;
};

let promises: "both" | "snd" | "neither" = "both";

const DisplayPromiseBug = () => {
  const firstMaybePromise = (() => {
    if (promises !== "both") return fst;
    return delayedValue(fst);
  })();
  const secondPromise = (() => {
    if (promises === "both") {
      promises = "snd";
      return delayedValue(snd);
    } else if (promises === "snd") {
      promises = "neither";
      return delayedValue(snd);
    }
    return snd;
  })();
  const firstValue =
    typeof firstMaybePromise === "string"
      ? firstMaybePromise
      : use(firstMaybePromise);
  const secondValue =
    typeof secondPromise === "string" ? secondPromise : use(secondPromise);

  console.log("Bugged", { firstValue, secondValue });

  return (
    <>
      <h1 className="font-bold">This example fails</h1>
      <p className="pb-10">
        It prints "This is my first message" twice in the console
      </p>
      <div>{firstValue}</div>
      <div>{secondValue}</div>
    </>
  );
};

[cwstra]

Looking at that non-jotai example again, while the code is certainly unusual, I can't imagine that the bugged behavior is expected. I suppose that would mean this is a bug in Next and/or React?

[dai-shi]

curious if it can be reproduced without Nextjs.

[cwstra]

Replicated the behavior in this repository, which uses Vite SSR, so seems that either the problem lies in React, or it's a very easy mistake to make.