useEffect not working when mixed with useState

[GuessEver]

Bug Description

click the click button

• for the first time, it will console a changed
• for the second time and later, no a changed will be triggered, but new values of a rendered

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

const obj = proxy({ a: 'a' });

export const Test = () => {
  const { a } = useSnapshot(obj);
  const [b, setB] = useState('b');

  const handleClick = useCallback(
    () => {
      setB('b');
      obj.a = `${a}a`;
    },
    [a],
  );

  useEffect(
    () => {
      console.log('a changed');
    },
    [a],
  );

  console.log('render:', a);

  return (
    <div>
      <div>{a}</div>
      <button onClick={handleClick}>click</button>
    </div>
  );
};

works when

• setB to different values every time
• add {sync:true} to useSnapshot options
• upgrade to react 18

Reproduction Link

https://codesandbox.io/p/sandbox/ftwgvh

[dai-shi]

I'm not sure if this bug persists in v2, but v2 doesn't support react < 18 anyway.
So, I guess this bug is something we won't fix.

• add {sync:true} to useSnapshot options

That sounds like a reasonable workaround if that solves.

[GuessEver]

Got it, thanks for reply