How to prevent React Native from stucking on es6 Promises?

Question

I'm working with Realm DB. When I work with callbacks and promises from native module (add_listener, both from results or subscriptions) my UI stuck and, even if I can see logs from js console of things getting done correctly, the UI updates only after an interaction (more specifically when I tap on the screen)

I noticed two differents behaviours:

1) When I add a listener on an object or a results object, SOMETIMES the setState in the listener callback it's fired but the problem above occurs

2) When I await promise to check if the subscription to a certain query is completed I need to tap even for see the logs go on. In this case I use this code (CODE1)

For the first problem I tryed:

1) Include the setState in the callback in a setTimeout, setImmediate - NOT WORKING

You can read about the first problem here

UI doesn't update until tap on the screen when setState is called inside a realm listener callback

https://github.com/realm/realm-js/issues/2371

Maybe related:

React Native Fetch does not render response until after clicking screen

The second problem is a new one, so I'm investigating

CODE 1

susbscribeAndSyncTo = async (object) => {


    // Aggiungo dei listeners per controllare quando la sincronizzazione sarà completata
    console.log("Recupero i dati dal server")
    var subscription = object.subscribe()

    return new Promise((resolve, reject) => {
      console.log("Imposto un listener sulla sottoscrizione")
      subscription.addListener((subscription, state) => {
        console.log("La sottoscrizione è in fase", state)
        if (this.checkSubscriptionState(state, 'user_data')) {
          console.log("La sincronizzazione è completa. rimuovo i listener dalla sottoscrizione e ritorno la promessa", state)
          subscription.removeAllListeners()
          resolve(true);
        }
      })

    });

  }

Thaks for the help

i don't see any `await` in your code sample. Are you sure this is the correct code? — SerShubham, Jun 23 '19 at 16:41
have you checked app not in debug mode as per second (maybe related) topic you linked to? — skyboyer, Jun 23 '19 at 18:02
For the (1) yes. It doesn't work...for (2) I'll check immediatly. — DxW, Jun 23 '19 at 18:13

DxW · Accepted Answer · 2019-06-25T19:38:45.607

For the problem (2), I solved this way

susbscribeAndSyncTo = async (object) => {


// Aggiungo dei listeners per controllare quando la sincronizzazione sarà completata
console.log("Recupero i dati dal server")
var subscription = object.subscribe()

return new Promise((resolve, reject) => {
  console.log("Imposto un listener sulla sottoscrizione")
  subscription.addListener((subscription, state) => {
    console.log("La sottoscrizione è in fase", state)
    if (this.checkSubscriptionState(state, 'user_data')) {
      console.log("La sincronizzazione è completa. rimuovo i listener dalla sottoscrizione e ritorno la promessa", state)
      subscription.removeAllListeners()
      setTimeout(() => null, 0);  // THIS IS THE WORKAROUND
      resolve(true);
    }
  })

});

}

I did thanks to this post:

https://github.com/facebook/react-native/issues/6679

I'll check if this workaround solve also the (1), but I'm confident on it

UPDATE

It solves also (1)

Damn, does not work for me. Any other tips related to this? – elsurudo Apr 12 '21 at 07:34 — elsurudo, Apr 12 '21 at 07:34

How to prevent React Native from stucking on es6 Promises?

1 Answers1