useReactiveVar unreliable with fast changing primitive

i’m using a reactive var to track rollover state as a boolean, and I’ve noticed that useReactiveVar is unreliable if the state updates quickly (which is often the case with rollovers).

const rVar = makeVar(true);

const Demo = () => {
  const val = useReactiveVar(rVar);
  console.log(val);

  return (
    <div
      style={{ marginTop: 200, border: `1px solid red` }}
      onMouseEnter={() => {
        console.log(`enter`, rVar());
        if (!rVar()) rVar(true);
      }}
      onMouseLeave={() => {
        console.log(`leave`, rVar());
        if (rVar()) rVar(false);
      }}
    >
      val: {val ? `true` : `false`}
    </div>
  );
};

In this simplified demo, if the user rolls over the div quickly and repeatedly for awhile, the component will eventually no longer rerender, despite the boolean value in the reactive var updating.

An apparent workaround is to use store the state in a non-primitive like {val:true} which seems to reliably trigger a rerender

Versions ver 3.3.9

[benjamn]

@dontsave Can you try making this reproduction runnable, using this template? I tried, but I couldn’t get the component to stop updating, using 3.3.9 or any later version.

Other questions that might be relevant:

1. What exact versions of react and react-dom are you using?
2. What browser version?

[brainkim]

Shipped in 3.3.16