What is the relationship between the read and write functions in atom()?

[ouweiya]

When the write function of an atom sets itself, it throws an error, Uncaught Error: atom not writable.

const oneAtom = atom(1);

const threeAtom = atom(
    get => get(oneAtom),
    (get, set, update: number) => {
        set(threeAtom, get(threeAtom) + update);
    }
);

const App = () => {
    const [one, setOne] = useAtom(oneAtom);
    const [three, setThree] = useAtom(threeAtom);

    return (
        <div>
            <h1>one: {one}</h1>
            <h1>three: {three}</h1>

            <button onClick={() => setOne(c => c + 1)}>one++</button>
            <button onClick={() => setThree(1)}>three++</button>
        </div>
    );
};

export default App;

However, when the read function is a PrimitiveAtom, it does not throw an error.

const threeAtom = atom(
   10,
   (get, set, update: number) => {
      set(threeAtom, get(threeAtom) + update);
   }
);

[rothsandro]

In your first example, your atom has a getter function which returns the latest value (and also has automatic dependency tracking). If Jotai would allow updating the value of threeAtom, the getter function would be ignored afterwards, which is not what you want. You should update oneAtom instead: set(oneAtom, get(oneAtom) + update).

In the second example, the provided value 10 is just the initial value and ignored after setting the atom value for the first time. That's why it works here.

[ouweiya]

I've discovered that the function atomWithDefault was specifically conceived and designed to address atom dependencies.

const oneAtom = atom(10);
const twoAtom = atomWithDefault(get => get(oneAtom) * 2);

const App = () => {
    const [two, setTwo] = useAtom(twoAtom);
    return (
        <div>
            <h1>two: {two}</h1>
            <button onClick={() => setTwo(c => c + 1)}>setTwo</button>
        </div>
    );
};