I have a schema model where one of my objects has a property that stores a list of items. As an example, we can say the parent object is a TodoList and it holds a list of tasks. I render the tasks by fetching the TodoList from the useObject hook and render TodoList.tasks.
As the user adds more tasks, this list can become quite large – say around 100 items. As the list grows, deleting a single task gets slower and slower. After using the React profiling tools in Flipper, I see that when a task is deleted, the entire list of items is re-rendered since the parent object/list reference changes. This is the reason why the re-render becomes slow as items grow.
I am wondering what is a solution for improving my re-renders when deleting from a list.
EDIT: My renderItem component passed to the FlatList is memoized. Adding to the list does not trigger all items to re-render, but deleting does.
The description of the issue is clear but the cause is not clear. 100 items isn’t a lot of items and re-rendering 100 items should happen pretty much instantly. So deleting and item, while causing a re-render, should be almost imperceptible.
There’s also a matter of how that data is being observed; are you using object or collection listeners? If so, what’s the implementation?
I think some brief sample code that duplicates the issue would clarify the issue, and possible cause.
You can see the behavior mentioned in this project. This project has a Store as the top level object and a list of Tasks under the Store. When you create a task, you will see that the memoized Tasks are not re-rendered, but deleting causes re-render on every Task.
I would attach the React profiling json but the forum says I cannot upload json attachments as a new member, so I have provided screenshots of the profiling. You can also produce the same results if you profile on your machine.
Screenshot on the left is of adding an item to the Store.tasks and screenshot on the right is of deleting an item from the Store.tasks:
To answer your question of how I’m observing the data, I am using the hooks from @realm/react so however it is setup there is how I am using it. I looked into the useObject hook and it appears to be using a collection listener.
I guess I am just confused as to why deleting from the list seems to cause the parent object (Store in my code example) reference to change completely. At least that is what I think the problem is
