An alternative API to selectAtom for impure atoms, allowing to keep the old value of a derived atom under certain conditions.

[iwoplaza]

It might sometimes be helpful to create a derived atom which holds the latest value that met a certain condition. For example we want an atom that derives the latest -valid- value of an input, while still letting the user change the underlying data according to their will.

A usage example in a Markdown Editor:

//
// Atoms
//

// Markdown code, can be edited by a user
const markdownAtom = atom('# Document Title\nEdit me')

// Used for rendering the preview
const lastValidMarkdownAtom = atomWithHistory((get, { KeepOld }) => {
  const value = get(markdownAtom);

  if (!isValidMarkdown(value)) {
    // new value is not valid, so we keep the old value
    return KeepOld;
  }

  // The new value is valid, lets apply it
  return value;
});

//
// Components
//

function Editor() {
  const [code, setCode] = useAtom(markdownAtom);
  // ...
}

function Preview() {
  const validMarkdown = useAtomValue(lastValidMarkdownAtom);
  // ...
}

In my implementation, the atom returns atomWithHistory.Empty if the atom getter returns KeepOld when no 'old' value exists.

Mitigating micro-suspensions

This pattern also helps with mitigating Suspensions due to microtasks, for example:

const userAtom = atom(async (get) => {
  // synchronizing with an external store
});

const chatsAtom = atom(async (get) => {
  // synchronizing with an external store
 // this can change frequently
});

/**
 * What "welcome message" should we show to the user
 */
const welcomeMessageAtom = atomWithHistory((get, { Discard, KeepOld }) => {
  const user = get(loadable(userAtom));
  const chats = get(loadable(chatsAtom));

  if (user.state === 'hasError' || chats.state === 'hasError') {
    return "Sorry, we are having issues";
  }
  
  if (user.state === 'loading') {
    // The user object is yet to be defined, or it changed.
    // Lets not show a potentially stale welcome message.
    return Discard; // <-- the atom will once again have the `atomWithHistory.Empty` value
  }

  if (chats.state === 'loading') {
    // Since chats can change quite frequently, and it is not as impactful if we show
    // a stale message, lets keep the old value.
    return KeepOld;
  }

  return `Welcome {user.data.name}! (${chats.data.length})`;
});

Implementation

import { Getter, atom } from 'jotai';
import { selectAtom } from 'jotai/utils';

export const Empty = Symbol('The atom with history has no value');

const Actions = {
  Discard: Symbol('Discard previous computation result'),
  KeepOld: Symbol('Keep the value from the previous computation'),
};

function atomWithHistory<T>(
  compute: (
    get: Getter,
    actions: typeof Actions,
  ) => T | typeof Actions[keyof typeof Actions],
) {
  const innerAtom = selectAtom(
    atom((get) => {
      return compute(get, Actions);
    }),
    // Nothing to select
    (v) => v,
    // equalityFn
    (prev, next) => {
      return prev === next || next === Actions.KeepOld;
    },
  );

  return atom((get) => {
    const value = get(innerAtom);

    if (value === Actions.Discard || value === Actions.KeepOld) {
      // This can happen if the atom has not yet been resolved with a result, only with actions.
      return Empty;
    }

    return value as T | typeof Empty;
  });
}

export default Object.assign(atomWithHistory, {
  Empty: Empty as typeof Empty,
});

[dai-shi]

For example we want an atom that derives the latest -valid- value of an input, while still letting the user change the underlying data according to their will.

It doesn't sound impure. Why won't you have the valid value and wip value in an object with an atom, or with two atoms?

[dai-shi]

So, you want to store invalid value in the store, and only use valid value? How about creating three atoms baseAtom, lastValidAtom and finalAtom.

[iwoplaza]

What would they represent? Sorry, I do not understand.

[dai-shi]

const isValid = (x) => Number.isInteger(x);
const baseAtom = atom(0);
const lastValidAtom = atom(0);
const finalAtom = atom(
  (get) => get(lastValidAtom),
  (get, set) => {
    set(baseAtom, (prev) => prev + 0.1));
    const value = get(baseAtom);
    if (isValid(value)) {
      set(lastValidAtom, value);
    }
  }
);

Maybe, you don't have a control like that? Then, selectAtom would be a solution as being impure.

[dai-shi]

Here's probably what you want:

const isValid = (x) => Number.isInteger(x);
const baseAtom = atom(0);
const finalAtom = selectAtom(baseAtom, (value, prev) => {
  if (isValid(value)) {
    return { baseValue: value, validValue: value };
  }
  return { baseValue: value, validValue: prev?.validValue };
});

The use of prev is "impure".

[iwoplaza]

Ah, I did not know the selectAtom selector provided a prev value. I guess now atomWithHistory is just alternative syntax for selectAtom.

const isValid = (x) => Number.isInteger(x);
const baseAtom = atom(0);
const finalAtom = atomWithHistory((get, { KeepOld }) => {
  const value = get(baseAtom);

  if (isValid(value)) {
    return value;
  }

  return KeepOld;
});

I guess it mostly helps with the second example I gave, where we have multiple dependencies to consider.

const userAtom = atom(async (get) => {
  // synchronizing with an external store
});

const chatsAtom = atom(async (get) => {
  // synchronizing with an external store
 // this can change frequently
});

/**
 * `atomWithHistory` implementation
 */
const welcomeMessageAtom = atomWithHistory((get, { Discard, KeepOld }) => {
  const user = get(loadable(userAtom));
  const chats = get(loadable(chatsAtom));

  if (user.state === 'hasError' || chats.state === 'hasError') {
    return "Sorry, we are having issues";
  }
  
  if (user.state === 'loading') {
    // The user object is yet to be defined, or it changed.
    // Lets not show a potentially stale welcome message.
    return Discard; // <-- the atom will once again have the `atomWithHistory.Empty` value
  }

  if (chats.state === 'loading') {
    // Since chats can change quite frequently, and it is not as impactful if we show
    // a stale message, lets keep the old value.
    return KeepOld;
  }

  return `Welcome ${user.data.name}! (${chats.data.length})`;
});

/**
 * `selectAtom` implementation
 */
const welcomeMessageAtom = selectAtom(atom((get) => ({
  // we have to list all dependencies here, instead of reading them directly in the getter
  user: get(loadable(userAtom)),
  chats: get(loadable(chatsAtom)),
})), ({ user, chats }, prev) => {
  if (user.state === 'hasError' || chats.state === 'hasError') {
    return "Sorry, we are having issues";
  }
  
  if (user.state === 'loading') {
    // The user object is yet to be defined, or it changed.
    // Lets not show a potentially stale welcome message.
    return undefined;
  }

  if (chats.state === 'loading') {
    // Since chats can change quite frequently, and it is not as impactful if we show
    // a stale message, lets keep the old value.
    return prev;
  }

  return `Welcome ${user.data.name}! (${chats.data.length})`;
});

atomWithHistory allows to specify dependencies in the getter, while selectAtom needs a derived atom that returns all dependencies. A minor difference, but I found it a little more readable. Maybe someone will find it neat 💚