How to avoid extra rerender?

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];
};

[dai-shi]

No. 😁 https://github.com/pmndrs/jotai/blob/84802077db94ee8874a7e61422e47662d6db7ed6/src/utils.ts#L2