Slow update of useQuery in react-native

Hello dear community.

I have the following component in react native (simplified):

function PostsScreen() {
  const realm = useRealm();
  const posts = useQuery(Post);

  console.log(posts.at(0).visits);

  const addOne = () => {
    realm.write(() => {
      posts.at(0).visits += 1;
    });
  }

  return <Pressable onPress={addOne}>Click</Pressable>
}

This realm has 5000 posts. THe problem is that whenever I click on the button, the component is updated (and the console.log prints the new value) after ~1 second which feels like a lag.

Am I missing something?
Thank you

The code looks ok. However, it appears you know the specific object to be updated so a query would not be needed. More importantly, the object at 0 could change so updating the specific object by _id would probably be better. Can you change

const posts = useQuery(Post);

to

const myPost = useObject(Post, _id);

and then update just myPost? See if that makes a difference.

Hi. Thank you for your answer but unfortunately I haven’t asked my question properly.

This is the simplified version of my code. The actual code shows a virtualized list (React Native’s FlatList):

function PostsScreen() {
  const realm = useRealm();
  const posts = useQuery(Post);

  console.log(posts.at(0).visits);

  const addOne = () => {
    realm.write(() => {
      posts.at(0).visits += 1;
    });
  }

  return <>
    <Pressable onPress={addOne}>Click</Pressable>
    <FlatList data={posts} renderItem={renderItem} keyExtractor={keyExtractor} />
  </>
}

So whenever I update one of the posts (even through the console, outside of the UI) it takes around 1-2 seconds for the component to update.

PS: I have also memorized the component passed to “renderItem”.

It’s still not exactly clear where the trouble is; however, there will be trouble doing this (as mentioned above).

posts.at(0).visits

Without sorting your data - which guarantees the order - or querying for a specific object, updating object (0) could be a different object at different times. My guess is that would produce an undesirable result.

Why FlatList? Why not just return the one that was updated? I would suggest, as a test, implementing the code from the documentation here and see if that produces a different response time.

Hi Jason.
As I mentioned earlier, this is a “simplified” version of the code, so addOne doesn’t exist in my code.
So the actual code is that there is a list of posts, the user taps on a post and a modal appears and saves the changes. Now the modal disappears but it takes around 1-2 seconds for the component to update and reflect the user’s changes.

Understood. The code posed in the original question (which we’ve implemented) is not taking 1-2 seconds to update so that would indicate there’s something different about the code you’re actually using and experiencing the difficulty with. It could even be an environmental issue…

Without seeing that code though, it’s obviously difficult for us to hazard a guess as to what could be causing it. Can you reduce the code you’re actually using to a minimal, duplicatable example?

1 Like

Hi Jay.

Thank you very much for your response. After a deeper investigation, I realized that it was a problem with my code. I have a component that loops through all items on each render to do some aggregation. Deleting that component made it super fast. I’ll have to optimize that component.

Thank you again