Q:

Redux performance questions in react native

Suppose I'm writing a Twitter clone but much simpler. A tweet looks like this:

With a Like button as circled in the picture. Every tweet has states like this:
{
    tweetId: '123456789',
    message: 'Stack Overflow',
    date: 125878315832,
    user: {
        uid: '431827512',
        username: 'some_user_name',
        displayName: 'some_display_name',
        profilePictureUrl: 'https://some-url.com'
    },
    liked: false
}

Where liked indicates whether the viewer has liked this tweet. If liked is false, then the Like button will stay uncolored, if it's true, then the button will become red. I store all tweets in redux store in a structure like this:
{
    [tweetId]: {
        message: 'Stack Overflow',
        date: 125878315832,
        user: {
            uid: '431827512',
            username: 'some_user_name',
            displayName: 'some_display_name',
            profilePictureUrl: 'https://some-url.com'
        },
        liked: false
    },
    [tweetId]: {
        ...
        ...
    },
    ...
    ...
}

And this is my reducer tweet_reducer.js and how I handle LIKE_TWEET action in it, the LIKE_TWEET action returns the tweetId of the tweet that's being liked:
export default function (state = { tweets: {} }, action) {
    switch (action.type) {
        ...    // Other cases
        case LIKE_TWEET:
            const tweetId = action.payload;
            const tweet = state.tweets[tweetId];
            return {
                tweets: {
                    ...state.tweets,
                    [tweetId]: {
                        ...tweet,
                        liked: true
                    }
                }
            };
    }
}

This way, I update the liked field of that particular tweet in store. And in my component, I have componentWillReceiveProps that handles receiving updated tweets. Therefore, now, the Like button of that particular tweet should be red. This all happens as expected, except that it takes about 1 second for the like button to turn red when store has more than 50 tweets in it. How can I make it faster? BTW, each tweet is a PureComponent not a Component

A:

Add some simple time-stamped logging to your code to find out where the time is going - when you enter/exit each of your reducers, when you publish your actions, and when your component is notified of the appState change, and when you change the color of the button.  This will tell you which calls are quick (as expected) and which are not.  Then you'll know where to look for your missing second...

