Component doesn't rerender if realm object used as state.

[TuTejsy]

Goals

I use setState hook with realm object and expect that Component will re-render after realm object modified

Expected Results

Component should re-render

Actual Results

Component re-render in DEBUG mode, but it doesn't in RELEASE mode

Steps to Reproduce

1. Create Realm Object with property
2. Use this object as state for functional component
3. Modify This object and update state
4. Component should re-render, but it doesn't (in RELEASE mode)

I have created Test Environment where you can easily reproduce it: https://github.com/TuTejsy/Test-Environment

Demo in DEBUG mode: https://youtu.be/LZxPk5P5TK4
Demo in RELEASE mode: https://youtu.be/HX617LHOO3Y

Code Sample

I have created Test Environment where you can easily reproduce it: https://github.com/TuTejsy/Test-Environment

Version of Realm and Tooling

• Realm JS SDK Version: "3.6.4"
• Node or React Native: React Native
• Client OS & Version: IOS 13
• Which debugger for React Native: Chrome Dev Tools

[kraenhansen]

This is most likely a duplicate of #2655

[chrise86]

@TuTejsy did you manage to resolve your issue? Also facing this problem.

[EzeMortal]

@chrise86 @TuTejsy I dont know if this will help you but I managed to use a hook and re-render my component when a change is made on realm #2345

[saravanakumargn]

This is my solution to refresh the data and rerender the UI.

  const [ignored, forceUpdate] = useReducer((x) => x + 1, 0);

   useEffect(() => {
    const taskLists: Realm.Results<TaskSchema & Realm.Object> = realm
      .objects<TaskSchema>(TaskSchema.schema.name)
      .filtered('dueDate >= $0 AND done = false', startOfDay(new Date()))
      .sorted('dueDate');
    taskLists.addListener(listener);   // Added Listener
    setTaskData(taskLists);

    return () => {
      taskLists.removeListener(listener);
    };
  }, []);

  function listener(allTasks: any, changes: any) {
    updateUI(allTasks);
  }

  function updateUI(taskItems: any) {
    setTaskData(taskItems);
    forceUpdate();
  }

[kraenhansen]

@TuTejsy sorry for the long wait here and thanks for the detailed reproduction.

There's two of things going on here, the main issue is in the https://github.com/TuTejsy/Test-Environment/blob/master/src/containers/hooks/useCount.js#L10-L31 file:

1. The first argument sent to the listener is the object that the listener got added on. You shouldn't expect this to change when the underlying data changes.
2. When debugging using the chrome debugger, this argument is sent over the RPC bridge and therefore it will be a different object on every update. Which is a side-effect that you shouldn't rely on.

I would advice using a property from the object, as the state in useCount hook instead instead of the realm object reference, like this:

function useCount() {
  const [count, setCount] = useState();

  useEffect(() => {
      const countObj = DB.object(id);
      const listener = () => {
          setCount(countObj.count);
      };
      countObj.addListener(listener);
      return () => {
          countObj.removeListener(listener);
      };
  }, []);

  return count;
}

Closing this for now, please re-open if this suggestion produce unexpected results.