useAtomCallBack does not work as expected

[mahdix]

I'm trying to use useAtomCallback to handle an onclick event. Below is a simplified code.

When I use updater2 which is using basic Jotai functionality everything is working fine but with useAtomCallback it doesn't do anything (no errors and also no value updates in the UI).

What am I missing here?

const countAtom = atom(0);

const Counter = () => {
    const [count, setCount] = useAtom(countAtom);

    const updater1 = useAtomCallback((get, set) => {
        set(countAtom, get(countAtom) + 4);
    });

    const updater2 = () => {
        setCount(count + 1);
    };

    return (
        <>
            {count} <button onClick={updater2}>+3</button>
        </>
    );
};

P.S. Even wrapping the handler in a useCallback does not help:

const updater1 = useAtomCallback(
        useCallback((get, set) => {
            set(countAtom, get(countAtom) + 4);
        }, []),
    );

[rothsandro]

The code looks good (with useCallback) and should work.
Can you share a reproduction?

[mahdix]

I'm doing some more checks and looks like the data gets updated internally but not in the UI:

const Counter = () => {
    const [count, setCount] = useAtom(countAtom);

    const updater1 = useAtomCallback((get, set) => {
        console.log('count value is ', get(countAtom));
        set(countAtom, get(countAtom) + 1);
    });


    return (
        <>
            {count} <button onClick={updater1}>+3</button>
        </>
    );
};

With this code, the console.log prints out correct value (value is 1, value is 2, value is 3, ...) but UI still shows "0".

[mahdix]

Everything points to the direction that the atom inside useAtomCallback and the one in the component are two different things (they both get updated separately with two different values)

[mahdix]

I suspect, the useAtomCallback utility is designed to return the value of the atom that was changed which is the only way it can interact with the atoms in the outside world. Now, if the code wants to update multiple atoms I guess this would not work

[rothsandro]

The callback doesn't have to return the value. The code you provided works fine: https://stackblitz.com/edit/vitejs-vite-e2ucpdkq?file=src%2FApp.tsx

But useAtomCallback is not really needed here, you can simply use the setter provided by useAtom(). If your component only updates the atom value without reading it you can use useSetAtom() to prevent re-renders.

[mahdix]

I know it's not necessary here but I wanted to see if it can work. That's really strange. Let me check to see what is causing this issue

[mahdix]

ok I have absolutely no idea what the issue was. All I did was refresh some dependencies, reduces my package.json to minimally required deps, ran yarn install a few times and then reverted package.json to original. and now it is working fine.