This is regarding React (not React Native) and our WASM build.

Dependencies Used

• @realm/react@0.5.1
• realm@12.0.0-browser.2

Problem

The following code works as expected in React Native but not in React:

const tasks = useQuery(Task);

Behavior:

• When toggling or deleting a task, the tasks reference should be updated (it should be a new reference), but the reference does not get updated. Thus, the React component does not rerender.
• @realm/react expectedly executes these lines:
  https://github.com/realm/realm-js/blob/28a50dc926d400524379a65f76ec3fc79eb3088b/packages/realm-react/src/cachedCollection.ts#L169-L170
• @realm/react unexpectedly does not enter this if-block:
  https://github.com/realm/realm-js/blob/28a50dc926d400524379a65f76ec3fc79eb3088b/packages/realm-react/src/useQuery.tsx#L90-L93

Workaround

The following code is a temporary solution users can implement as a workaround:

const [requeryFlag, setRequeryFlag] = useState(false);
const tasks = useQuery(Task, (collection) => collection, [requeryFlag]);
useEffect(() => {
  // The value doesn't matter, only that it is different from the initial value.
  setRequeryFlag(true);
}, []); // <-- Only on mount is needed

Note that the useEffect() only needs to run on mount for useQuery() to correctly update.

Reproduce

Minimal local Realm app to reproduce the behavior: react-userquery-bug.zip

Notes

This issue does not seem to appear in React Native.