If I use Atom on a mounted component, how can I avoid multiple reads when dependencies are updated?

[hi-ogasawara]

Hi
When using Atom on a mounted component
When you update a dependency, it will be read multiple times.
So I'm trying to avoid this by following these steps
Is there another way?
*I especially want to prevent multiple fetches.

step

• Set with atomWithDefault to cut dependencies
• Update dependencies within atomWithDefault
• RESET atomWithDefault to updated value

another idea(No Tried)
　Read dependent atoms and if the value has not changed, create an atom that returns early with the previously used value
　*It may be possible to be read multiple times but not be fetched multiple times

Tried and tested code
*Uncomment out console.log as needed to confirm

import { atom , useAtom , useAtomValue , useSetAtom} from "jotai";
import { atomWithDefault , atomWithRefresh , RESET, useAtomCallback } from "jotai/utils";
import { useCallback } from "react";

const baseCount1 = atom(0);
const baseCount2 = atom(0);

const readCountAtom = atom((get) => {
  // console.log('readCountAtom:read');
  return get(baseCount1) + get(baseCount2);
})

const wrapReadCountDefault = atom((get) => {
  // console.log('wrapReadCountDefault:read');
  return get(readCountDefault);
});

const readCountDefault = atomWithDefault((get) => {
  console.log("readCountDefault:read");
  return get(baseCount1) + get(baseCount2);
});

const readCountRefresh = atomWithRefresh((get) => {
  // console.log("readCountRefresh:read")
  return get(baseCount1) + get(baseCount2);
});

function MountReadAtom() {
  const [countRefresh, setRefresh] = useAtom(readCountRefresh);
  const [countDefault, setReset] = useAtom(readCountDefault);
  const wrapCountDefault = useAtomValue(wrapReadCountDefault);
  const countAtom = useAtomValue(readCountAtom);

  const setCount1 = useSetAtom(baseCount1);
  const setCount2 = useSetAtom(baseCount2);

  // Read multiple times
  const handleRefresh = useCallback(() => {
    setCount1((prev) => prev + 1);
    setCount2((prev) => prev + 1);
    setRefresh();
  }, [setCount1, setCount2, setRefresh]);

  // Read once
  const handleDefault = useCallback(() => {
    setReset(0);
    setCount1((prev) => prev + 1);
    setCount2((prev) => prev + 1);
    setReset(RESET);
  }, [setCount1, setCount2, setReset]);

  // Read multiple times
  const handleCountAtom = useCallback(() => {
    setCount1((prev) => prev + 1);
    setCount2((prev) => prev + 1);
  },[setCount1, setCount2])

  // Read once
  const handleDefaultAtomCallBack = useAtomCallback(
    useCallback(() => {
      setReset(0);
      setCount1((prev) => prev + 1);
      setCount2((prev) => prev + 1);
      setReset(RESET);
    }, [setCount1, setCount2, setReset])
  );

  return (
    <>
      <button onClick={handleRefresh}>Refresh: {countRefresh}</button>
      <button onClick={handleDefault}>Default: {countDefault}</button>
      <button onClick={handleCountAtom}>commonAtom: {countAtom}</button>
      <button onClick={handleDefaultAtomCallBack}>
        handleDefaultAtomCallBack
      </button>
      <label>WrapDefault: {wrapCountDefault}</label>
    </>
  );
}

export default MountReadAtom;

[dai-shi]

I'm not sure if I follow 100%, but can you define a write-only atom to prevent it?

[hi-ogasawara]

@dai-shi
Thank you for answering!

If I use get with a write-only atom in useEffect (side effects) or event handlers, it should work since dependencies won’t be tracked. However, for the following reasons, I have been using a read-only atom, so if there are any alternative methods.
I have written a new comment about the current situation and how to use it, and I would be very grateful if you could answer it for me.

Note: Regarding AtomCallback (write-only atom), I noticed some behavior that didn’t seem intended, so I plan to submit a separate bug report.

Reasons:

• I used a read-only atom to retrieve data during rendering.
  I wanted to avoid implementing loading display logic myself, which would be necessary without setting it to a Promise type.

• Sometimes, I want dependencies to be tracked (this is more important) .
  I want it to fetch and retrieve new data when dependencies change. If I were to use a write-only atom, I would need to re-fetch in
  every event handler where dependencies might change, which I’d like to avoid. For example, when fetching page data,
  I’d need to add re-fetch logic to every event handler where dependencies might change.

[hi-ogasawara]

@dai-shi

There are several read-only atoms that communicate with the backend. They use multiple common atoms (dependencies) for fetching data. For example:

export const fetch1 = atom(async (get) => {
  const atomData1 = await get(atom1);
  const atomData2 = await get(atom2);
  return await fetchData1(atomData1, atomData2);
});

export const fetch2 = atom(async (get) => {
  const atomData1 = await get(atom1);
  const atomData2 = await get(atom2);
  return await fetchData2(atomData1, atomData2);
});

It’s very convenient that updating atom1 and atom2 will cause fetch1 and fetch2 to be re-evaluated by Jotai, and I’d like to take advantage of this mechanism.

When atom1 and atom2 are updated, multiple fetches occur. I want to limit this to a single fetch. However, is it a specification that multiple reads occur when updating several dependent atoms?

If there are cases where an atom is read multiple times and others where it’s not, please let me know.🙇‍♂️

[dai-shi]

signal is designed for such cases, so using it is fine.

I just converted the example to avoid "async" completely,
https://stackblitz.com/edit/vitejs-vite-wjefeq?file=src%2FApp.tsx
but the problem still persists. I thought this case was already supported.
cc @dmaskasky

[hi-ogasawara]

@dai-shi
I misunderstood that you were talking about signal
Sorry for the late reply.

The above link is the pattern with async removed from fetch1 and fetch2, correct?
That was what I wanted to try with Pattran2. My mistake.

const fetch1 = atom((get) => {
  console.log("fetch1:read")
  const atomData2 = get(atom2);
  const atomData1 = get(atom1);
  return await fetchData1(atomData1, atomData2);
});

const fetch2 = atom((get) => {
  console.log("fetch2:read")
  const atomData1 = get(atom1);
  const atomData2 = get(atom2);
  return await fetchData2(atomData1, atomData2);
});

Does the above synchronous update of multiple dependencies mean that it should be read only once, but is being read multiple times?

[dai-shi]

I thought we made it so that it would call just once. But, I might be missing something. So, it feels like a bug in the sync case.

[dmaskasky]

In Jotai, set recomputes the dependents of an atom in place. This ensures that if those values are accessed in the very next line using get, they reflect the updated state. Consider the following example:

const a = atom(0);
const b = atom((get) => get(a) + 1);
const w = atom(null, (get, set) => {
  const b1 = get(b); // 1
  set(a, (v) => v + 1); // Recompute dependents of `a` here
  const b2 = get(b); // 2
});

This behavior means that every time an atom's value is updated with set, all its dependents are recalculated, even if they aren't accessed in the write function.

Edit: I am exploring changing this behavior so that only the dependents accessed with get will be recomputed in place, all others are deferred until the end. #2827

[dai-shi]

To recap,

I thought we made it so that it would call just once.

It was my misunderstanding.