realm-js: useObject inside FlatList throws Exception in HostFunction: Cannot create asynchronous query while in a write transaction

How frequently does the bug occur?

All the time

Description

Calling useObject inside a flat list item component can throw the Exception “Cannot create asynchronous query while in a write transaction” if a realm.write() occurs around the same time.

My guess cause is that the FlatList is doing some multithreading work to do the layouting of the item. As you will see in my example, the offending writes do not call addListener inside the transaction.

Stacktrace & log output

Error: Exception in HostFunction: Cannot create asynchronous query while in a write transaction

This error is located at:
    in Message (at App.tsx:121)
    in RCTView (at View.js:32)
    in View (at VirtualizedList.js:2073)
    in VirtualizedListCellContextProvider (at VirtualizedList.js:2088)
    in CellRenderer (at VirtualizedList.js:814)
    in RCTScrollContentView (at ScrollView.js:1674)
    in RCTScrollView (at ScrollView.js:1792)
    in ScrollView (at ScrollView.js:1818)
    in ScrollView (at VirtualizedList.js:1268)
    in VirtualizedListContextProvider (at VirtualizedList.js:1100)
    in VirtualizedList (at FlatList.js:645)
    in FlatList (at App.tsx:118)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in SafeAreaView (at App.tsx:116)
    in FooList (at App.tsx:155)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in Onin(RootComponent) (at renderApplication.js:60)

Can you reproduce the bug?

Yes, always

Reproduction Steps

import React, { useEffect, useState } from 'react'
import { FlatList, SafeAreaView, Text } from 'react-native'
import RNFS from 'react-native-fs'
import Realm from 'realm'

export function App() {
  const r = useWaitForRealm()
  const [initialized, setInitialized] = useState(false)

  useEffect(() => {
    if (!r) return
    const asyncEffect = () => {
      // cleanup the db
      const fooResults = realm.objects<Foo>('foo')
      realm.write(() => {
        for (const x of fooResults) {
          realm.delete(x)
        }
      })
      setInitialized(true)
    }
    void asyncEffect()
  }, [r])

  if (!initialized) return null

  return <FooList />
}

let i = 0
const sleep = (milliseconds: number) => new Promise(r => setTimeout(r, milliseconds))
function FooList() {
  const fooResults = useQuery<Foo>(() => realm.objects<Foo>('foo'))

  useEffect(() => {
    const asyncEffect = async () => {
      while (i < 30) {
        console.log('i', i)
        await sleep(10)
        const id = String(i++)
        realm.write(() => {
          realm.create<Foo>('foo', { id }, Realm.UpdateMode.Modified)
        })
        await sleep(0)
        realm.write(() => {
          realm.create<Foo>('foo', { id }, Realm.UpdateMode.Modified)
        })
      }
    }
    asyncEffect().catch(console.error)
  }, [])

  return (
    <SafeAreaView style={{ margin: 20 }}>
      <Text>{fooResults?.length}</Text>
      <FlatList
        inverted
        data={fooResults}
        renderItem={() => <Message />}
        keyExtractor={item => item.id}
        maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 500 }}
      />
    </SafeAreaView>
  )
}

function Message() {
  const x = useObject<Foo>('foo', '0')
  return <Text>{x?.id}</Text>
}

// #region === Setup the Realm instance (start) ===
// You can skip reading this bit, I've left it here so it can be easily reproduced.
const FooSchema: Realm.ObjectSchema = {
  name: 'foo',
  primaryKey: 'id',
  properties: {
    id: 'string',
  },
}

export let realm: Realm
let realmInitializingPromise: Promise<Realm> | undefined
export function waitForRealm() {
  if (realm) return Promise.resolve(realm)
  if (!realmInitializingPromise) realmInitializingPromise = initRealm()
  return realmInitializingPromise
}

async function initRealm() {
  const path = `${RNFS.CachesDirectoryPath}/example.realm`
  realm = await Realm.open({
    path,
    schema: [FooSchema],
    schemaVersion: 0,
  })
  return realm
}

export function useWaitForRealm() {
  const [optionalRealm, setRealm] = useState<Realm | undefined>(realm)
  useEffect(() => {
    waitForRealm()
      .then(x => setRealm(x))
      .catch(console.error)
  }, [])
  return optionalRealm
}

type Foo = { id: string }

export function useObject<T>(type: string, primaryKey: string): (T & Realm.Object) | undefined {
  const [object, setObject] = useState<(T & Realm.Object) | undefined>(
    realm.objectForPrimaryKey(type, primaryKey)
  )

  useEffect(() => {
    const listenerCallback: Realm.ObjectChangeCallback = (_, changes) => {
      if (changes.changedProperties.length > 0) {
        setObject(realm.objectForPrimaryKey(type, primaryKey))
      } else if (changes.deleted) {
        setObject(undefined)
      }
    }
    if (object !== undefined) {
      object.addListener(listenerCallback)
    }
    return () => {
      object?.removeListener(listenerCallback)
    }
  }, [object, type, primaryKey])

  return object
}

function useQuery<T>(query: () => Realm.Results<any>) {
  const [collection, setCollection] = useState<Realm.Results<T>>(query())

  useEffect(() => {
    const listenerCallback: Realm.CollectionChangeCallback<T> = (_, changes) => {
      const { deletions, insertions, newModifications } = changes
      if (deletions.length > 0 || insertions.length > 0 || newModifications.length > 0) {
        setCollection(query())
      }
    }

    if (collection && collection.isValid() && !realm.isClosed)
      collection.addListener(listenerCallback)

    return () => {
      collection?.removeListener(listenerCallback)
    }
  }, [collection])

  return collection
}
// #endregion === Setup the Realm instance (end) ===

Version

“realm”: “^10.20.0-beta.1”,

What SDK flavour are you using?

Local Database only

Are you using encryption?

No, not using encryption

Platform OS and version(s)

ios

Build environment

No response

Cocoapods version

• RealmJS (10.20.0-beta.1):