JotaiでReactのレンダリングを最適化するテクニック、Reactive系のライブラリでは普通のことだけれども

https://twitter.com/dai_shi/status/1701133210212831674

const countAtom = atom(0);

// This can cause extra re-render
const firstAtom = atom((get) => {
  const isEven = get(countAtom) % 2 === 0;
  return [isEven]; // creates a new array
});

// This is render optimized
const isEvenAtom = atom((get) => get(countAtom) % 2 === 0);
const secondAtom = atom((get) => [get(isEvenAtom)]);

firstAtomとsecondAtomは機能的には同じ動きをしますが、例えば、countAtomの値が0から2に変化した場合、firstAtomを使うと"extra re-render"が起こりますが、secondAtomの場合は起こりません。"extra re-render"とは、UIに変化がないものの、Reactの処理としてコンポーネントの関数が実行されるというものです。

このsecondAtomの挙動を実現するためには、atomの値が変化しない場合には後続のatomの更新を止めるロジックが必要になり、Jotaiにはそれが実装されています。Reactive系のライブラリには普通に実装されているものですが、注意して実装しないと漏れます。実際、最近のJotaiのリリースで何度かバグを入れ込んでしまいました。