This is a demo to demostrate a possible optimization using Realm database to show data inside a react native list as for example in components likes FlatList, SectionList or better a VirtualizedList that is the superclass of both.
The goal of this demo is an implementation that can give good performance, avoiding copy of data returned by a query and to show data inside a list component with a very easy design. To have best results using Realm I tried to leverage the Realm Db lazy feature. Lazy mean that when you query results from Realm, it return an array of objects but it's lazy because Realm read data only when strictly necessary therefore the result array will be read just when you access specific elements. This is very interesting to show a list of data because when you have many elements you can avoid to take care of pagination to have good performance. For example if in the list component inizialization you shows just 10 items, realm will fetch just these, then scrolling the list realm will fetch the others necessary objects.
Lazy feature is also a big constraint because often you need to process the resultset before feed the list component. For example when you need to group objects by data or name or other properties and feed a SectionList component, you need to process te whole resultset to build something that is compatible with the component, in the specific case of SectionList you need array of objects that represent sections and every section contain array of item. But process the whole array has an linear overhead related to the resultset size and also jeopardise the realm lazy feature.
In this Demo the dataset contains "stock market" objects. Each element has a market index and a stock name, I want group data by market index. An item is something like {marketIndex: 'NASDAQ', stock: 'Apple'}.
- Fetch data sorted by marketIndex;
- Use the resultset returned by realm query as it is. Avoid to iterate the whole resultset;
- Use a VirtualizedList
VirtualizedList is very interesting because take in input (as for the other list component) an array of objects but you must write a method that define the Item data for the list. In this way when can provides items with different properties, for example some items with an header. Here we have consecutive element that could have the same marketIndex therefore is possible insert this information inside the item and the rendering function will take care to render something like "section - item" or simply "item".
IDEA: better optimization could avoid to insert tons of items in the list component and reuse a static set of rendered items.
The demo take care also possible update of the Real dataset and for this It use realm callback and the extraData property of the VirtualizedList to inform the component that a rendering update is needed, as (by documentation) this is a pure component and changing the underlining dataset does not involves authomatic re-rendering.
This is a test for BLogPressure application avaiable on Play Store - Internet site https://www.blogpressure.tech