Dispatching action in redux when click section list item makes app slow

Question

I have a section list in React Native that have a large number of items around 400+ items so on each item click i am navigating to the next screen and dispatching action from redux using slices. I am passing the ContactItem component to the render item function of the SectionList

   const ContactItem = ({ contact }: { contact: IContact }) => (
            <ContactListItem
                key={contact.key}
                name={contact.value}
                thumbColor={contact.color}
                phone={contact.phone}
                searchWord={searchQuery}
                onPress={() => {
                    dispatch(getContact(contact));
                    navigation.navigate('Chat');
                }}
            />
);

and here is the reducers function getContact i am just saving the clicked contact object

getContact(state, action) {
            state.singleContact = action.payload;
}

but when clicking the item it stucks around 2 seconds and then do a slow navigation to the chat screen so anyone had faced this issue before and what could be the problem for that slow performance ?

NB: i removed the dispatch and just did the navigation only and it still slow so the problem i think is with the long list

Answer 1

Probably,dispatch(getContact(contact)) cause whole list to rerender which is expensive operation and hurt app performance.

Try to avoid ContactListItem unnecessary rerender when the content didn't actually change. This should be achieved either by memorization (React.memo), useMemo, or shouldComponentUpdatecomponent life cycle method