React.memo not calling comparison function

Viewed 696

I'm trying to use React.memo to only render my component when a prop is updated. My props are an object, a map and two callback functions. With shallow compare, they never change (which is intended). So I would like to use the comparison function you can pass to React.memo. But that function never gets called and does nothing for the outcome. When I set a simple (int) prop which changes, it does update the component. How can I get the comparison function to work?

This does not work, the component never updates when it should:

MainView.js (note the missing HomeGoalsPrediction):

<RenderMatchItem week={weeks.get(item.MatchNumberIdentifier)} item={item} 
       setPrediction={setPrediction} reRenderStateForWeekCallback={reRenderStateForWeekCallback} />

RenderMatchItem.js:

export const RenderMatchItem = memo((props) =>
{
    const {
        week, item, setPrediction, reRenderStateForWeekCallback
    } = props;

    return (
        <View style={appStyles.matchContainer}>
            <RenderMatchText item={item} />
            <RenderBottomRow week={week} match={item} setPrediction={setPrediction} reRenderStateForWeekCallback={reRenderStateForWeekCallback}/>
        </View>
    );
}, areMatchesEqual); 

const areMatchesEqual = (prevProps, nextProps) =>
{
    console.log('waat');
    /**return (prevProps.match.MatchWinnerPrediction == nextProps.match.MatchWinnerPrediction && 
        prevProps.match.HomeGoalsPrediction == nextProps.match.HomeGoalsPrediction &&
        prevProps.match.AwayGoalsPrediction == nextProps.match.AwayGoalsPrediction);**/
    return false;
};

Although areMatchesEqual is there and returns false, the component never get's updated.

if I change the MainView.js to include an int which changes when the component should update, it works:

MainView.js (note the added HomeGoalsPrediction):

<RenderMatchItem week={weeks.get(item.MatchNumberIdentifier)} item={item} 
       setPrediction={setPrediction} reRenderStateForWeekCallback={reRenderStateForWeekCallback} homeGoals={item.HomeGoalsPrediction}/>

But the areMatchesEqual function still isn't called. Because the console shows no output and when I change return false too return true the component still get's updated. This leads me to believe the comparison function is not called. But why is that?

0 Answers
Related