2

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?

TruffelNL
  • 480
  • 5
  • 22
  • (https://stackoverflow.com/questions/64834263/how-can-i-force-update-react-memo-child-component) Does this answer your question it says you should use `useMemo()` hook. – carlosdafield Nov 07 '21 at 18:47
  • Could you provide [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) ? without the code, it's hard to say why the comparison function is not called – Andrey Nov 09 '21 at 12:02
  • @carlosdafield That unfortunately broke it even more. With `useMemo()` it won't rerender at all. – TruffelNL Nov 09 '21 at 21:20
  • @TruffelNL i have encountered the same problem, have you solved it? – Flo Rida Sep 28 '22 at 11:08
  • @FloRida No, I ended up using an additional prop which changes when an update/rerender is needed. Never found out why it doesn't work. – TruffelNL Oct 09 '22 at 11:36

0 Answers0