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.🙇‍♂️

[hi-ogasawara]

@dai-shi
Thank you! I now have a better understanding.
Why does signal not read multiple times?
Are you waiting for an update on the dependent atom to abort?

[dai-shi]

We abort old execution when dependencies change.

[hi-ogasawara]

@dai-shi
I see.
Is it OK to use signal.aborted just to solve the problem of multiple reads?

[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.

Pattran2

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

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