updates seem slow

[Talor-A]

Hi, is there a reason there's a delay between doing a realm.write(()=>{}) and the component updating? does this persist in production mode? thanks.

[jasonmerino]

@Talor-A can you post the code to reproduce the slowness you're seeing? Also, have you tried the same realm.write/re-render code without react-native-realm? I'm curious to see if you notice a difference between using this library and manually binding up and removing the event listeners like they have in the docs.

In my experience I have noticed that realm can be noticeably slower in development than in a release build, especially with large data sets. That being said, if there's an issue here I would love to know and address it quickly.

[Talor-A]

@jasonmerino I'll try to compare without react-native-realm. Here's the code I'm using, it's pretty similar to the example, but in todo list form:

TodoContainer

class TodoContainer extends React.Component<Props, State> {
  render() {
    const {item} = this.props

    return <Todo
      title={item.title}
      done={item.done}
      navigation={this.props.navigation}
      onPressDone={this.props.onPressDone}
    />
  }
}
export default connectRealm(TodoContainer, {
  schemas: ['Task'],
  mapToProps(results, realm, ownProps) {
    const item = results.tasks.find(i => i.id === ownProps.navigation.state.params.item.id)
    return {
      realm,
      item,
      onPressDone: val => setDone(item, val)
    }
  }
})

HomeContainer

class HomeContainer extends React.Component<Props, State> {
  render() {
    return <Home navigation={this.props.navigation} list={this.props.todos} onPressAdd={this.props.onPressAdd} />
  }
}
export default connectRealm(HomeContainer, {
  schemas: ['Task'],
  mapToProps(results, realm) {
    return {
      realm,
      todos: results.tasks || [],
      onPressAdd: () => {
        const randomNum = Math.floor(Math.random() * 100000).toString()
        realm.write(() => realm.create('Task', {
          id: randomNum,
          title: 'Todo #' + randomNum,
        }))
      }
      }
    }
  }
)

these are just the container components. my problem is coming from the onPressAdd and onPressDone functions. when I execute them with a button onPress in my presentational components, it takes ~1sec to create a new todo or mark the todo as done, respectively. I.E. in my Todo component, I have a <Switch/> to represent the done/not done state. when I press it and execute onDonePress, it takes a second before the switch flips to the correct position.

[jasonmerino]

@Talor-A from the code you posted I'm not seeing anything that would cause a bottleneck or any slowness. However, it doesn't look like all the code you're using isn't here and it's probably not enough to get a super accurate reproduction case going.

I have noticed that sometimes managing the state of Switch components can be tricky, but it doesn't sound like you are toggling the switch based on a users press. Plus the trickiness I've seen is that if the underlying data doesn't update fast enough it can cause the Switch to go back to the previous position until the underlying data is updated. That doesn't sound like your issue.

Have you had a chance to write the same logic without this library to see if there's a difference in the time it takes to do the update?

[Talor-A]

sorry if it wasn't clear, the problem is similar to what you're saying - the Switch animation triggers, but goes back to the previous position until the underlying data updates a second or so later. I haven't been able to test without this library yet though.