Keeping Atoms Alive

When an effectful Atom runs its Effect, the Registry caches the returned value. Any component that reads the Atom afterward gets the cached value instantly, without re-running the Effect.

However, this cache only lives as long as at least one component subscribed to the Atom remains mounted. When every component that reads the Atom unmounts, the Registry discards the cache (after a short grace period of 400ms).

To see this in action, go to the home page. Then click the Add User link to navigate away. Now return to the home page. Notice the spinner appears again.

What happened? When you navigated away, the UserGrid component unmounted. Since no other components were subscribed to usersAtom, the Registry discarded its cache. When you navigated back, UserGrid mounted again, but the cache was empty, so the Atom had to run its Effect again.

This default behavior makes sense for many scenarios. But in our case, the users’ data doesn’t change frequently. Why fetch the same data and show a spinner every time the home page loads?

Instead, we can persist the cache using Atom.keepAlive.

Update atoms/user.ts as shown below:

1
import { Atom } from "@effect-atom/atom-react";
2
import { Effect } from "effect";
3

4
import { atomRuntime } from "@/atom-runtime";
5
import { UserService } from "@/services/user-service";
6

7
// ============ Users Atom ============
8
export const usersAtom = atomRuntime
9
  .atom(
10
    Effect.gen(function* () {
11
      return yield* UserService.getUsers();
12
    }),
13
  )
14
  .pipe(Atom.keepAlive);

Now navigate away from the home page and return. The spinner no longer appears. The data is served instantly from cache.