Component does not always re-render when array changes (useObject)

[mvrahas]

How frequently does the bug occur?

Seen always

Description

My task app schema includes an array of subtasks. When I push a new subtask to the array, the component doesn't re-render every time. It only re-renders every other time.

const TaskDisplay = ({_id})=>{

    const realm = useRealm()
    const task = useObject(Task, Realm.BSON.ObjectID(_id))

    const handleAddSubtask = (description) => {
        realm.write(() => {
          task.subtasks.push({description})
        })
    }

    console.log('RE-RENDER')

    return(
        <>
            <Button title={'Add Subtask'} onPress={()=>handleAddSubtask('This is just a subtask')}/>
        </>
    )
}

The interesting thing is that if I add in this Text below the Button, the component does re-render every time.

```{task ? task.subtasks.map((subtask,i)=>{subtask.description}) : null`}``

Stacktrace & log output

No response

Can you reproduce the bug?

Yes, always

Reproduction Steps

I created a sample app to demonstrate where this bug is happening for me..

1. Download and run the app
2. Click on 'Add task'
3. Click on 'Add subtask'
   Expected result: 'RE-RENDER' is printed to the console
   Actual result: 'RE-RENDER' is not printed to the console

https://github.com/mvrahas/task-app-test

Version

0.4.1

What SDK flavour are you using?

Atlas Device Sync

Are you using encryption?

Yes, using encryption

Platform OS and version(s)

iOS 16.1.2

Build environment

Expo 47.0.3

Cocoapods version

No response

[kneth]

A quick look at your app, and I wonder if you need to add a subscription to Subtask. Flexible sync will not follow links, see the box about Object Link" in the documentation.

[kneth]

@mvrahas On the other hand, this issue is similar to the behaviour observed in #5182. Can you reproduce it you only use a local database?

[takameyer]

@mvrahas Very strange that it happens every other time. I will investigate that part further. I would actually expect it to not re-render at all, and here is why.
useObject was designed to only re-render an objects list properties when they are visible and have changed. This was to prevent multiple re-renders, as the lists themselves contain logic to handle if they re-render or not. If the list items have never been accessed by the component rendering them, then the event listener will skip re-rendering.
Now, if you want to do some special event when adding subtasks, I would recommend implementing your own event listener on this collection.
Let me know if this helps!

[mvrahas]

Thank you @takameyer It makes sense to me that that would be the expected behavior. If you wouldn't mind linking any helpful documentation to create an custom event listener, that would help me out

[takameyer]

@mvrahas I have opened a PR #5208. There was actually a few issues with useObject which have been addressed. There should be indeed a re-render when anything changes in a useObject result. This was not happening for lists until they were actually accessed. Now the listeners are primed right away, which corrects this issue. I have tested this against the project you created, and now the RE-RENDER happens every time.

Thanks again for creating this issue and reproduction!

[mvrahas]

Awesome! Thank you