On the question of primitive atom and derived atoms

[liby]

Here's a simple example.

The focus is on the code in the helper and add-item file sections.

// primitive atom
export const activeAtom = atom({});

// write-only atom, In fact, it can be defined as just atoms 
// but for the sake of observation and comparison, 
// it is deliberately written as read-write atom
export const activeDerivedAtom = atom(
  (get) => {
    const list = get(listAtom);
    if (list.length > 0) {
      return list[list.length - 1];
    }
    return activeAtom;
  },
  (get, set, _update) => {
    const list = get(listAtom);
    set(activeAtom, list[list.length - 1]);
  }
);

After defining the code above, I observe that their behavior is very different, and the primitive atom set function doesn't work at all.

  const onClick = async () => {
    await setTimeout(() => {
      setList({
        name: `New Item ${formatSecond(new Date())}`,
        id: Date.parse(new Date().toString())
      });

      // Not working
      setActive(list[list.length - 1]);
      // It works
      setActiveDerived();
      console.log("comparison", active, activeDerived);
    }, 1000);
  };

This leads me to be very confused, want to find the answer to the question here in you. Maybe there is an obvious answer to the question I asked, but I'm sorry I didn't get it.

@dai-shi

[dai-shi]

return get(activeAtom) in helper.ts:L31??

[dai-shi]

Thanks for the video. Now, I understand what you are seeing.
It took me a while to get it, but I got it. It's not behavior caused by jotai library, but more like JS behavior.
So, setActive(list[list.length - 1]); is reading list from a stale closure. The list is still empty.
This is the behavior you can observe with useState too.

[liby]

Thank you! It dawned on me that the latest state is not yet available in the current function context.
Also, I would like to ask, in a situation like mine, is it possible to use only primitive atom without using derived atoms? How would I do it?

[dai-shi]

const Component = () => {
  const [list, setList] = useState([])
  const [lastItem, setLastItem] = useState()
  const handleClick = () => {
    setTimeout(() => {
      const newItem = 123
      setList(prev => [...prev, newItem])
      setLastItem(list[list.length - 1])
    }, 1000)
  }
  // ...
}

This is the useState version.
Because we should not rely that the component will re-render in 1s,
the good solution is setLastItem(newItem).

[liby]

setLastItem(newItem) also does not solve the issue of the component will re-render in 1s, it is the same as setActive(list[list.length - 1]); is reading list from a stale closure. The list is still empty.

I think the code to solve this problem should look like this:

const [list, setList] = useState([]);
const lastItem = useMemo(() => {
  return list[list.length - 1];
}, [list]);

const handleClick = () => {
  setTimeout(() => {
    const newItem = {
      name: `New Item ${formatSecond(new Date())}`,
      id: Date.parse(new Date().toString())
    };
    setList((prev) => [...prev, newItem]);
  }, 1000);
};

Thank you so much. Today is another day of great benefit. I would like to review these knowledge points, have a nice day!

[dai-shi]

Yeah, that's the better solution is this case.
Note: I mean newItem must be created without list.