When setAtom in timeout or async function will update component twice and with different value

[shenweizheng110]

Bug Description

When I use useAtomValue and listen to an atom twice in the same component, and when I update this atom, it will update my component twice. Here is the console result.

• first update: b1: latest value, b2: previous value.
• second update: b1: latest value, b2: latest value.

import React, { useEffect, useState } from "react";
import "./styles.css";
import { useAtom, useAtomValue, Provider, atom, useSetAtom } from "jotai";
import { selectAtom } from "jotai/utils";
import { focusAtom } from "jotai-optics";

const testAtom = atom({ a: 1, b: 2 });

const aAtom = focusAtom(testAtom, (optic) => optic.prop("a"));
const bAtom = focusAtom(testAtom, (optic) => optic.prop("b"));

export default function App() {
  const setB = useSetAtom(bAtom);

  const b1 = useAtomValue(bAtom);
  const b2 = useAtomValue(bAtom);

  console.log("swz::: b1: ", b1, "b2: ", b2);

  return (
    <span
      onClick={() => {
        setTimeout(() => {
          setB((prev) => prev + 1);
        }, 0);
      }}
    >
      b1 - {b1}, b2 - {b2}
    </span>
  );
}

Reproduction Link

https://codesandbox.io/p/sandbox/jotai-createstore-derived-sub-forked-9mxcwq?file=%2Fsrc%2FApp.tsx%3A1%2C1-32%2C1

[dai-shi]

Hi, thanks for reporting.

I have two quick things to confirm:

1. Does it reproduce without focusAtom?
2. Does wrapping console.log with useEffect change the output?

[shenweizheng110]

but when using recoil, the component just updates one time. Don't know what happens in jotai.

[dai-shi]

1. yes, i will reproduce when use normal atom. You can use the following code.

You are still using focusAtom.

Based of your code, I made this: https://stackblitz.com/edit/vitejs-vite-qekadu?file=src%2FApp.tsx&terminal=dev
How does it look?

import { useEffect } from 'react';
import { useAtomValue, atom, useSetAtom } from 'jotai';

const testAtom = atom({ a: 1, b: 2 });
const simpleAtom = atom(1);
const bAtom = atom(
  (get) => get(testAtom).b,
  (get, set, fn: (prev: number) => number) => {
    const curr = get(testAtom);
    set(testAtom, {
      ...curr,
      b: fn(curr.b),
    });
  }
);

export default function App() {
  const setB = useSetAtom(bAtom);
  const b1 = useAtomValue(bAtom);
  const b2 = useAtomValue(bAtom);

  const setSimple = useSetAtom(simpleAtom);
  const simple1 = useAtomValue(simpleAtom);
  const simple2 = useAtomValue(simpleAtom);

  useEffect(() => {
    console.log('simple1: ', simple1, 'simple2: ', simple2);
  });

  return (
    <>
      <p
        onClick={() => {
          setTimeout(() => {
            setB((prev) => prev + 1);
          }, 0);
        }}
      >
        b1 - {b1}, b2 - {b2}
      </p>
      <p
        onClick={() => {
          setTimeout(() => {
            setSimple((prev) => prev + 1);
          }, 0);
        }}
      >
        simple1 - {simple1}, simple2 - {simple2}
      </p>
    </>
  );
}

[shenweizheng110]

if you use react v17, you will reproduce.

I don't think focusAtom has any problem. When I use AtomValue, I listen to simpleAtom twice and then I think simple1 is deeply equal to simple2, but it gives me different result.

[dai-shi]

if you use react v17, you will reproduce.

That's a known behavior. With v17, you need to use unstable_batchedUpdates for this case.

Check it out: https://stackblitz.com/edit/vitejs-vite-t8lzju?file=src%2FApp.tsx&terminal=dev

[shenweizheng110]

Does it mean React must be after v17 when using jotai, because React v16 doesn't have unstable_batchedUpdates.

[dai-shi]

If you need batched updates, I think yes.

[shenweizheng110]

ok，I know. Thanks for your answer, but why doesn't Jotai have built-in batch updates?

[dai-shi]

Jotai works everything in sync. It's by design. Maybe, if I assume your actual question, the reason is to avoid duplicating work with React (meaning, React has already the batching capability, so Jotai shouldn't have it.)