Wait until all the callbacks have been called

Question

I have component in react native that shows all the chats a user has. The main logic must be in componentDidMount(). Here, a simplified version:

componentDidMount(){
     ConnectyCube.chat.list({}, function(error, dialogs) {
        chats = dialogs.map(chat => {
            const opponentId = //some logic
            ConnectyCube.users.get(function(error, res){
                //some logic to populate chats 
            });
            }
        )

        this.setState({chats: chats})
        }
    );
}

Main problem, in other words, is that I don't know how to use multiple callbacks (one for each chat that the user has) to handle the data structure 'chats' in order to setState at the end. Maybe, my problem, is that I'm thinking in a synchronous way because I'm new to an event-driven approach. Any help is appreciated.

Answer 1

Here's a way you can keep track of the number of remaining requests and trigger some code when they are all complete. Note, this is almost exactly what Promise.all does.

//some kind of global or component level variable, tracks the number of pending requests left
var remaining = 0;

componentDidMount(){
     ConnectyCube.chat.list({}, function(error, dialogs) {
        // set remaining to how many dialogs there are
        remaining = dialogs.length;
        chats = dialogs.map(chat => {
            const opponentId = //some logic
            ConnectyCube.users.get(function(error, res){
                //some logic to populate chats

                // decrement remaining and check if we're done
                if (--remaining === 0) {
                  finalCallback(); // in here you do your setState.
                }
            });
            }
        )

        this.setState({chats: chats})
        }
    );
}