Using Redux and React Hooks, Flatlist will not re-render nor will the individual components inside of it

Question

I'm using React Native, React Hooks, Redux and Function components. I am using useSelector to get a large array from my state from Redux and I iterate through it using a Flatlist. In my Flatlist I render multiple child components, including children of my child. I pasted the main child at the bottom of this post. When I am on a separate screen and the FlatList is inactive and a property changes inside of an object in my array trackingBoardList , I expect that Flatlist will rerender when I come back to the screen, but it doesn't. Furthermore, even if I try to memoize the child component AvatarListItem using React.memo() , the child by itself also will also not re-render. I cannot get the full list to re-render, nor can I get the children by themselves to re-render. Is Flatlist incompatible with React Hooks and arrays, with nested objects? In my reducer I am indeed returning that array immutably when it changes, and I'm doing that using Immer draft .

I get my state with useSelector. It's a large array with lots of deep nested objects:

  const trackingBoardList = useSelector((state: iAppState) => {
    return state.trackingBoardAndSchedule.trackingBoardList;
  });

My Flatlist looks like this:

    <FlatList
            data={trackingBoardList}
            extraData={trackingBoardList}
            keyExtractor={() => uuid()}
            renderItem={({ item, index }) => {
              return (
                  <AvatarListItem
                    patientID={item.patient.id}
                    patientFirstName={item.patient.name_first}
                    patientLastName={item.patient.name_last}
                    patientMiddleName={item.patient.name_middle}
                    patientSex={item.patient.gender}
                    patientAge={calculateAge(item.patient.birth_dttm)}
                    visitReason={item.reason_for_visit}
                    time={item.created_dttm}
                    inProgress={false}
                    patientAvatarURI={item.patient.profile_image_name}
                    status={item.evisit_status}
                  />
              );
            }}
          />

My child component looks like this:

const AvatarListItem = (props: iAvatarListItem) => {
  return (
    <>
      <ListItemContainer {...props}>
        <Avatar
          avatarSize={42}
          avatarType='patient'
          avatarUserID={props.patientID}
          avatarURI={props.patientAvatarURI}
        />
        <NameAgeColumn>
          <ColumnTitle>
            {props.patientFirstName}
            {props.patientMiddleName ? ` ${props.patientMiddleName}` : ''}
            {` ${props.patientLastName}`}
          </ColumnTitle>
          <ColumnSmallText>
            {props.patientSex === 'M' ? 'Male, ' : ''}
            {props.patientSex === 'F' ? 'Female, ' : ''}
            {props.patientAge} Years
          </ColumnSmallText>
        </NameAgeColumn>
        <ReasonColumn>
          <ColumnTitle>Reason</ColumnTitle>
          <ColumnSmallText>{props.visitReason}</ColumnSmallText>
        </ReasonColumn>
        <LongBadge>
          <LongBadgeText>{props.status}</LongBadgeText>
        </LongBadge>
      </ListItemContainer>
    </>
  );
};

export default AvatarListItem;

Answer 1

To answer my own problem, I discovered the bug immediately after I posted this. It was a mutability issue. I was assured that my state was immutable using ImmerJS however instead of using my draft state Immer was somehow automajically using my baseState, which worked almost everywhere throughout the app but finally caused an issue on this particular screen. If you are having a very strange re-rendering issue where a component just refuses to re-render no matter what you do, I highly recommend focusing on your reducer and trying a few different ways of returning your state.