Avoid unnecesarry re-rendering

[tacrew]

I am currently studying how to avoid unnecessary re-rendering in the state management pattern using useContext+useReducer using jotai and recoil.

• Application Overview
  Article component to display the article content and the number of likes, and the like button to increase the number of likes
  Header component to display the total number of likes for all articles
• Expected behavior
  When the Like button of an article is pressed, only the header and the article component will be re-rendered.

Here are the sandboxes for each using jotai and recoil.
jotai: https://codesandbox.io/s/with-jotai-qj8nv?file=/src/useArticles.ts
recoil: https://codesandbox.io/s/with-recoil-pnkvq?file=/src/useArticles.ts

In the case of Recoil, I was able to avoid unnecessary re-rendering by using Atom that has article list as state and Atom that has article itself as state using selectorFamily.

const articlesState = atom<Article[]>({
  key: "articlesState",
  default: [
    {
      id: "1",
      contents: "this is the first article",
      likes: 0
    },
    {
      id: "2",
      contents: "this one is the second",
      likes: 0
    }
  ]
});

const articleState = selectorFamily<Article | undefined, { articleId: string }>(
  {
    key: "articleState",
    get: ({ articleId }) => ({ get }) => {
      const articles = get(articlesState);
      return articles.find((article) => article.id === articleId);
    },

    set: ({ articleId }) => ({ set, get }, newValue) => {
      if (!newValue) return;
      const articles = get(articlesState);
      const updatedArticles = articles.map((article) => {
        if (article.id !== articleId) return article;
        return newValue;
      }) as Article[];
      set(articlesState, updatedArticles);
    }
  }
);

I expected to get the same result in Jotai by replacing Recoil's selectorFamily with atomFamily, but it didn't work.

const articlesState = atom<Article[]>([
  {
    id: "1",
    contents: "this is the first article",
    likes: 0
  },
  {
    id: "2",
    contents: "this one is the second",
    likes: 0
  }
]);

const articleState = atomFamily<
  { articleId: string },
  Article | undefined,
  Article
>(
  ({ articleId }) =>
    atom(
      (get) => get(articlesState).find((article) => article.id === articleId),
      (get, set, update) => {
        const articles = get(articlesState);
        const updatedArticles = articles.map((article) => {
          if (article.id !== articleId) return article;
          return update;
        });
        set(articlesState, updatedArticles);
      }
    ),
  (a, b) => a.articleId === b.articleId
);

jotai	recoil

(clicked: article 1 -> 2 -> 1)

I think my understanding of jotai is bad, but how can I improve it?

[dai-shi]

Jotai takes some different approaches from Recoil.
They are the following in the order of my preference:

1. atoms-in-atom pattern
2. splitAtom util
3. atomFamily which should work with the Recoil mental model

You want to check the behavior of commits with useEffect.
https://codesandbox.io/s/with-jotai-forked-g814z?file=/src/Article.tsx

Double render with one commit is an expected/intentional behavior. See also: #627

[tacrew]

Thank you for your answer.
I have also checked the link you provided and understand that this is the intended behavior and that it is expected to be resolved in time.
I will also try coding with the atoms in atom pattern to understand the mental of jotai.

[dai-shi]

it is expected to be resolved in time.

It turns out that useMutableSource is dropped and useSyncExternalStore lands. jotai doesn't use uSES and sticks with useReducer, which I believe behaves better for us. We will see when react 18 lands and get more feedbacks. So, while dobule-render-with-one-commit behavior isn't ideal, it's probably the best for now.

In case if you or anyone finds/proves this behavior less performant compared to say recoil, we might re-consider our approach.

Although i didn't confirm, this behavior happens only with splitAtom and atomFamily, and not with atoms-in-atom pattern.

[tacrew]

Thanks for providing us the additional information kindly!

I don't believe I have any performance issues at the moment.

I have also tried to implement it with the atoms-in-atom pattern, but I have one unclear point, so I would like to ask you an additional question for future study.

Here is the code sandbox.
https://codesandbox.io/s/with-jotai-atoms-in-atom-u25k1?file=/src/useArticles.ts

This code generally works well as intended, but when the like button is pressed an even number of times, the header is rendered twice: like "header -> article -> header".

In the above case, I clicked article 1 -> 2 -> 1

Is there something wrong with my usage of the API? I could have not find the cause...

[dai-shi]

I fixed your app to avoid creating articlesAtom.
https://codesandbox.io/s/with-jotai-atoms-in-atom-forked-9hvdj?file=/src/useArticles.ts
Hm, but it still has the double-render-one-commit behavior. I think my assumption was wrong.