useSnapshot: assignment to nested object ignored as "no-op", but later trigger causes outdated change to appear

[ziyuancc]

Minimal reproduction

import { Input } from 'antd';
import React, { useEffect, useState } from 'react';
import { proxy, useSnapshot } from 'valtio';

const state: any = proxy({ info: {} });

const Com1 = () => {
  const snap = useSnapshot(state);
  const [val, setVal] = useState('');

  useEffect(() => {
    /**
     * Expected:
     * - Only initialize/reset `val` when `state.info.list` truly changes.
     * - If `state.info.list` is reassigned with a new reference but same values,
     *   it is fine to treat it as a no-op and NOT reset `val`.
     *
     * Actual:
     * - After such a "no-op" reassignment of `state.info.list`, a later unrelated
     *   state change (clicking "Other Change", which only updates local `b`)
     *   causes this effect to run and resets `val`, as if `state.info.list`
     *   had just changed.
     */
    setVal(snap.info.list?.map((item: any) => item.id).join(''));
  }, [snap.info.list]);

  return (
    <div>
      {/* <div>{snap.info.otherInfo?.changeInfo}</div> */}
      <div>{JSON.stringify(snap.info?.list)}</div>
      <Input value={val} onChange={(e) => setVal(e.target.value)}></Input>
    </div>
  );
};

const Com2 = () => {
  useEffect(() => {
    // Initial response from backend
    const res = {
      list: [{ id: 1 }, { id: 2 }],
      otherInfo: { changeInfo: '000' },
    };
    state.info = res;
  }, []);

  const updateDate = () => {
    // New response from backend
    const res = {
      list: [{ id: 1 }, { id: 2 }],
      otherInfo: { changeInfo: '111' },
    };
    state.info = res;
  };

  return (
    <div>
      <div onClick={updateDate}>UpdateDate</div>
    </div>
  );
};

export default () => {
  const [b, setB] = useState(0);
  return (
    <div>
      <Com1 />
      <Com2 />
      <div onClick={() => setB(b + 1)}>Other Change</div>
    </div>
  );
};

[dai-shi]

This is an expected (though confusing) behavior.
My recommendation is to calculate the value in render.

  const nextVal = snap.info.list?.map((item: any) => item.id).join('');
  useEffect(() => {
    setVal(nextVal);
  }, [nextVal]);

[ziyuancc]

Thanks for the reply and the suggestion.

1. The update behavior of useSnapshot is different from React’s built‑in state updates. With Valtio, if I reassign a nested object with a new reference but the same values, it can be treated as “no update needed” at that moment (no re-render), but that change can still appear in the snapshot later when some other state changes.

2. The pattern works for simple scalar values, but it does not work well when the state is a reference type and is edited locally. Here is an example:

const Com1 = () => {
  const snap = useSnapshot(state);
  const [formList, setFormList] = useState<any[]>([]);

  const nextList = snap.info.list;

  useEffect(() => {
    setFormList(nextList);
  }, [nextList]);

  return (
    <div>
      <div>{JSON.stringify(snap.info?.list)}</div>
      <Form>
        {formList?.map((item: any) => (
          <Form.Item
            key={item.id}
            label={`Name${item.id}`}
            name={`name${item.id}`}
          >
            <Input />
          </Form.Item>
        ))}
      </Form>
      <Button
        onClick={() => setFormList([...formList, { id: formList.length + 1 }])}
      >
        Add Input
      </Button>
    </div>
  );
};

[dai-shi]

If you use "snap.info.list", it will subscribe to the old list, so state.info.list = ... doesn't notify. Either subscribe to snap.info or mutate the array like state.info.list.splice(0, state.info.list.length, ...). Sorry if I misunderstand your use case. In any case, specifying snap object in deps array is very tricky and not very recommended unless you know how exactly it behaves.