onMount doesn't work for Atoms referenced in useAtomCallback

[zhmushan]

Link to reproduction

https://codesandbox.io/s/boring-jackson-7d648z?file=/src/App.js

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

[dai-shi]

There doesn't seem docs clarifying the behavior, but mount in jotai means firstly subscribed. useAtom will subscribe to an atom, but useAtomCallback is a function to use an atom without subscription, so it's not mounted. We have similar discussions before and the current conclusion is this is by design to unmount atoms correctly.

[zhmushan]

@dai-shi Thanks your reply!

But this will result in the Atom used in useAtomCallback never being unmounted, and if it is a continuously running timer, it will execute indefinitely until it dies.

In my real-world application, multiple table components use the same filtering option, so I defined a filtering option atom. Different tables are switched through the Tab component, and the Atom that retrieves data is obtained in useAtomCallback. This causes the request for obtaining data from Table A to continue to be sent when I switch from Table A to Table B after updating the filtering option atom. I don't know what the best practice of jotai is for dealing with this scenario. (Because I want to manually control the Loading status of the page and I must delay setting the data, I am using useAtomCallback here.)

[zhmushan]

@dai-shi
https://codesandbox.io/s/musing-raman-lcmctg?file=/src/App.tsx

[dai-shi]

Can you describe what's your expected behavior?

[zhmushan]

@dai-shi First, when clicking "Change Filter", we noticed that only one request was made to /tableA. Then we switched to Table B and clicked "Change Filter" again, which resulted in two requests being made to /tableA and /tableB. I want it to only make one request to /tableB.

[dai-shi]

I see.

I don't know what the best practice of jotai is for dealing with this scenario. (Because I want to manually control the Loading status of the page

If you want such a control, it means it's not declarative, but imperative. Whatever it means, it's something like this in Jotai best practice:

export const tableAFilterAtom = atom({});
export const tableADataAtom = atom({});
export const setTableADataAtom = atom(null, async (get, set) => {
  const filter = get(filterAtom);
  const tableAFilter = get(tableAFilterAtom);

  try {
    const data = await fetch("/tableA", {
      method: "POST",
      body: JSON.stringify({ ...filter, ...tableAFilter })
    });
  } catch {}

  set(tableADataAtom, { type: "A" });
});

[zhmushan]

Thank you so much for your patient and helpful answers. Your assistance has been greatly appreciated. Thank you again!

[Qquanwei]

In the scenario of codesandbox, I think sending two network requests is not expected. Is this a known bug of jotai?