Component renders with old props and then updates to new ones

Question

I have a chat header component which shows the profile picture of the user and their name, and when I leave the chat window and go to another one, it still briefly shows the old header until updating 1/2 second later. This probably means the component uses the old props until overridden instead of the default props of undefined while new props are coming in.

The app is react native with react-native-navigation and the user exists the chat with goBack.

The chat header is inside a Chat component and it receives props from the redux state with Chat component dispatching, selecting and then passing the props. The code for the chat header:

const ChatHeader = (props) => {


return (
<View style={styles.container} key={props.userId}>
    <SimpleBackButton
      style={styles.backButton}
      onPress={props.onBack}
      size={30}
    />
    {props.isLoading ? (
      <TouchableWithoutFeedback onPress={props.onMatchProfilePressed}>
        <View style={styles.matchProfileContainer}>
          <PlaceholderAvatar />
        </View>
      </TouchableWithoutFeedback>
    ) : (
      <TouchableWithoutFeedback onPress={props.onMatchProfilePressed}>
        <View style={styles.matchProfileContainer}>
          {props.userInfo.animalURL ? (
            <SvgUri
              width="35px"
              height="35px"
              key={props.userId}
              uri={props.userInfo.animalURL}
            />
          ) : (
            <PlaceholderAvatar />
          )}

          <Text style={styles.nameContainer}>
            {getMatchDisplayName(props.userInfo)}
          </Text>
        </View>
      </TouchableWithoutFeedback>
    )}
  </View>)}

The header is inside Chat.js which dispatches to redux to get the data.

 <ChatHeader
    loading={match.loading || !requestsLoaded || !loaded}
    requestLoading={loadingFR}
    userInfo={match.displayInfo}
    key={matchId}
    userId={matchId}
    onMatchProfilePressed={() => {
      props.navigation.navigate("Match Profile", { userId: matchId });
    }}
    onBack={() => {
      props.navigation.goBack();
    }}
    isFriend={isFriend}
    isRequested={didSentFR}
    onAddFriend={onSendRequest}
    onCreateHangout={() =>
      props.navigation.navigate("Hangouts", {
        screen: "Create a Hangout",
        params: {
          user: {
            _id: matchId,
            matchProfile: match.displayInfo,
          },
        },
      })
    }
  />