Uploaded image for project: 'Realm JavaScript SDK'
  1. Realm JavaScript SDK
  2. RJS-2604

Object returned by `useObject()` does not rerender when going from `null` to Realm Object

    • Type: Icon: Bug Bug
    • Resolution: Unresolved
    • Priority: Icon: Minor - P4 Minor - P4
    • None
    • Affects Version/s: None
    • Component/s: Realm React
    • None

      Info

      @realm/react: 0.6.1
      react: 18.2.0
      react-native: 0.72.6
      realm: 12.2.1 (local)
      

      Problem

      Consider the following:

      Unable to find source-code formatter for language: ts. Available languages are: actionscript, ada, applescript, bash, c, c#, c++, cpp, css, erlang, go, groovy, haskell, html, java, javascript, js, json, lua, none, nyan, objc, perl, php, python, r, rainbow, ruby, scala, sh, sql, swift, visualbasic, xml, yaml
      // `task` can be either a `Task` or `null`.
      const task = useObject(Task, taskId);
      

      When the object (task) returned from useObject() is null, and subsequently added to the realm, the task will not be updated and, thus, the component will not rerender.

      Expected Behavior

      Despite being null, when the object is added to the realm, the task reference should be updated.

      Reproduce

      Attached files to reproduce: ReproUseObject_.zip

      > Due to size, the attachment contains all necessary files for a RN (v0.72) project expect for the android, ios, and vendor directories. Thus, a new RN project first needs to be created. The one attached is called ReproUseObject.

      The README in the attachment has information and instructions, including the following:

      Trigger Rerendering Issue

      1. Start the app.

      Output:

      LOG  RERENDERING
      LOG  {"task": null}
      
      1. Click ADD.

      This will add the task to the realm.

      Output:

      LOG  ADDING TASK...
      LOG  TASK ADDED!
      
      LOG  RERENDERING
      LOG  {"task": {"_id": [ObjectId], "description": "test", "isComplete": false}}
      
      1. Click TOGGLE STATUS to verify that it's correctly rerendering.

      This will update the task (isComplete) in the realm.

      Output:

      LOG  UPDATING TASK...
      LOG  TASK UPDATED!
      LOG  
      LOG  RERENDERING
      LOG  {"task": {"_id": [ObjectId], "description": "test", "isComplete": true}}
      
      1. Click DELETE.

      This will delete the task from the realm and task will be updated to null.

      Output:

      LOG  DELETING TASK...
      LOG  TASK DELETED!
      LOG  
      LOG  RERENDERING
      LOG  {"task": null}
      
      1. Click ADD.

      This will add the task to the realm, but task will still be null. (Expected behavior is that task should be updated to a realm object.)

      Note in the output below that the component does not rerender.

      Output:

      LOG  ADDING TASK...
      LOG  TASK ADDED!
      
      1. Click ADD.

      This will try to add the task to the realm (again) because the component still sees task as null.

      This will throw an exception ("existing primary key") since the task is in fact already in the realm.

      Output:

      ERROR  Error: Attempting to create an object of type 'Task' with an existing primary key value '652e96db47a9da41756090c1'., js engine: hermes
      

            Assignee:
            Unassigned Unassigned
            Reporter:
            unitosyncbot Unito Sync Bot
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: