[Realm React Native] Performance Issues After Migrating from Redux+AsyncStorage to Realm

MongoDB Atlas App Services & Realm Realm
1

I am migrating an habit tracker application from Redux+AsyncStorage to Realm for data management. The main view of the app is a Board where each row represents a Habit, each column represents a Date, and each cell is colored based on the habit’s streak. So when the user marks one cell as completed all the colors of the streak need to be recalculated.

Each cell of the board is represented in Realm in this collection:

class HabitDate extends Realm.Object<HabitDate> {
  static schema: ObjectSchema = {
    name: 'HabitDate',
    primaryKey: 'id',
    properties: {
      id: 'string',
      color: 'string?',
      date: {type: 'date', indexed: true},
      status: 'string',
      habitId: {type: 'int', indexed: true},
    },
  };

  static generateId(habit_id: number, date: string): string {
    return `${habit_id}_${date}`;
  }
}

And, in my component BoardCell I call the useObject hook like this:

useObject(HabitDate, HabitDate.generateId(habitId, dateStr))

The first render works great, but after pressing a cell an updating the color in Realm, the re-render is way slower than it was when my data was stored in Redux.

There may be a lot of cells rendered at once. Sometimes 1000+. And pressing a cell may cause 100+ object updates in Realm, since al the colors of the current streak need to be recalculated.

  1. Is it expected that Redux would perform better for this use case?
  2. Are there any optimizations I can implement to improve Realm’s performance in this scenario?
  3. Should I consider a different data structure or querying approach for better performance?