How to avoid extra rerender?

[michael-land]

with Jotai, the <FakeCard /> will re-render whenever editId changed, but Recoil.js does not because i can select only setter function. How to achieve the same behavior with Jotai?

Recoil

import React from 'react';
import { atom, useRecoilState, useSetRecoilState } from 'recoil';

const editIdAtom = atom<number | null>({
  key: `editIdAtom`,
  default: null,
});

function FakeCard() {
  const setEditId = useSetRecoilState(editIdAtom);
  const handleClick = React.useCallback(
    (e: React.MouseEvent<HTMLAnchorElement>) => {
      setEditId(1);
    },
    [setEditId]
  );
  return (
    <div>
      <a onClick={handleClick}>toggle</a>
      <FakeModal />
    </div>
  );
}

function FakeModal() {
  const [editId, setEditId] = useRecoilState(editIdAtom);
  const handleClose = React.useCallback(() => {
    setEditId(null);
  }, [setEditId]);

  return editId ? <span>editing {editId}</span> : null;
}

Jotai

import React from 'react';
import { atom, useAtom } from 'jotai';

const editIdAtom = atom<number | null>(null);

function FakeCard() {
  const [,setEditId] = useAtom(editIdAtom);
  const handleClick = React.useCallback(
    (e: React.MouseEvent<HTMLAnchorElement>) => {
      setEditId(1);
    },
    [setEditId]
  );
  return (
    <div>
      <a onClick={handleClick}>toggle</a>
      <FakeModal />
    </div>
  );
}

function FakeModal() {
  const [editId, setEditId] = useAtom(editIdAtom);
  const handleClose = React.useCallback(() => {
    setEditId(null);
  }, [setEditId]);

  return editId ? <span>editing {editId}</span> : null;
}

[dai-shi]

Hi, thanks for opening up the issue.
Jotai core doesn't provide useSetRecoilState equivalent. Instead, we use write-only atoms.

const editIdAtom = atom<number | null>(null);
const setEditIdAtom = atom(null, (_get, set, x: number) => set(editIdAtom, x));

  const [,setEditId] = useAtom(setEditIdAtom);

---

Now, I wonder if we can build a generalized hook.

const useSetAtom = (anAtom) => {
  const writeOnlyAtom = useMemo(() => atom(null, (get, set, x) => set(anAtom, x)), [anAtom]);
  return useAtom(writeOnlyAtom)[1];
};

[cevr]

I think a set of utility hooks for common patterns (like the one mentioned above) would add that icing on top of a wonderful cake

[dai-shi]

@cevr Yeah, I agree. And, I want to separate them from the core. Let me start with this one.

The utility hooks can get big. I need someone to volunteer to help it, especially for documentation & examples.

[dai-shi]

https://www.npmjs.com/package/jotai/v/0.5.0 published which includes #35
Please report if any issue is found. Closing this.

[liby]

const editIdAtom = atom<number | null>(null);
const setEditIdAtom = atom(null, (_get, set, x: number) => set(editIdAtom, x));

const [,setEditId] = useAtom(setEditIdAtom);

I have two questions about this part of the code:

1. Writing it this way does not avoid extra rerender, so what is the point?
2. How does it differ from using const [, setEditId] = useAtom(editIdAtom); directly?

@dai-shi Looking forward to your reply

[dai-shi]

I don't know why you think it doesn't avoid extra rerenders, but here's the example:
https://codesandbox.io/s/empty-wildflower-6kcmf?file=/src/App.js

[liby]

@dai-shi
It should be a problem with the code I wrote during testing, causing me to have the wrong perception. I apologize for asking questions without verifying it. Thank you for correcting me.

[liby]

@dai-shi
Follow up report, the reason for my misunderstanding is that not removing primitive atoms when using write-only atoms within a component.
Example: https://codesandbox.io/s/vigilant-hertz-bqb0r

[lili21]

is there any different between useSetAtom and useUpdateAtom ？

[dai-shi]

No. 😁

jotai/src/utils.ts

Line 2 in 8480207

export { useSetAtom as useUpdateAtom } from 'jotai'