Re-execute atom whenever a component is mount

[Darksoulsong]

Below there's an atom that fetches data from a given URL. It's instantiated in a modal and executed on component mount.

Example:

const fetchSomethingAtom = atom(
  'fetchSomethingAtom',
  (componentId: string) => {
    const queryApi = injectPromise(() => {
      return fetch('some-url')
      .then((response) => {    
        return response.json();
      })
    });
  },
  {
    ttl: 0
  }
);

// Using it later in a React component
const { data } = useAtomValue(fetchSomethingAtom);

// And here is some form logic to update some data, which we expect 
// to retrieve when the modal is open.

The problem is it's executed ONCE - meaning it's not executed when the modal is destroyed and then reopened.
Is there a way to force it to execute whenever the component is mounted?

[bowheart]

Hey @Darksoulsong as you have it, I'd expect ttl: 0 to do the trick. But there are a few more factors to consider:

• Is the modal component the only thing using this atom?
• Does the modal component unmount when it's "destroyed" or is it only hidden (e.g. returning null when its open prop is false)?

If other components, atoms, or selectors use the fetchSomethingAtom, they may be preventing it from being destroyed. When the modal is closed, you can check the atom's dependents with ecosystem.viewGraph() to see if it's still in the graph and what dependents are keeping it there.

If the component doesn't actually unmount, its own useAtomValue call will maintain the dependency on the atom, preventing it from being cleaned up. In this case, the simplest fix is probably to ensure the component is unmounted, though I know that sometimes complicates animations in modals or can be undesirable for performance when the modal contains lots of markup and CSS-in-JS styles and is reopened frequently.

Either way, you can always force the atom to reevaluate by invalidating it. For example, in a useEffect on modal open:

function MyModal({ id, open }) {
  const fetchSomethingInstance = useAtomInstance(fetchSomethingAtom, [id])
  const { data } = useAtomValue(fetchSomethingInstance)

  useEffect(() => {
    // just an example check to prevent double-fetching when the data hasn't loaded at all yet
    if (open && data) {
      fetchSomethingInstance.invalidate()
    }
  }, [open]) // only run when open
  ...
}

Combine this with injectPromise's runOnInvalidate option:

const fetchSomethingAtom = atom('fetchSomethingAtom', (componentId: string) => {
  const queryApi = injectPromise(
    () => {
      return fetch('some-url').then((response) => {
        return response.json();
      });
    },
    [],
    { runOnInvalidate: true }
  );

  return queryApi.setTtl(0);
});

I don't think I've ever used this pattern - it should usually be unnecessary. But it's there if you need it. Still, if possible I recommend ensuring that all dependents die on modal unmount so that ttl: 0 can do this for you.

If nothing is holding onto the atom instance when the modal closes but the atom still doesn't re-initialize, that sounds like a bug. A codesandbox reproing it would be helpful for triage.

[Darksoulsong]

HI @bowheart, the atom is used by three other components, so this is likely to be the problem; invalidating the atom sorted it out.
Thank you for your support!