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?