AlwaysLearning
AlwaysLearning

Reputation: 8011

Preventing re-renders using memo

Consider:

import { useEffect, memo } from 'react';
import ReactPlayer from 'react-player/youtube'
import { id2url } from './utils/format';

const Player = ({url}) => {
    console.log('Player re-renders')          // I should only see this once, right?
    return (
        <div className='PlayerInnerWrapper'>
            <ReactPlayer
                className="Player"
                url={url}
                controls={true}
                width='100%'
                height='100%' />
        </div>
    )
}

const MemoizedPlayer = memo(Player, (prev, cur) => {
    return true;                              // Player should never re-render, right?
});

const Parent = ({ videoData, setters }) => {
    useEffect(()=>{setters.setTerms([...setters.terms, 'aa'])})

    return (
        <div className="SecondRow">
            <div className='PlayerOuterWrapper'>
                <MemoizedPlayer url={id2url(videoData.id)} />
            </div>
        </div>
    )
}

For this experiment, useEffect in Parent purposefully causes Parent to infinitely re-render. My problem is that the console output shows that Player re-renders on each re-render of Parent. Note that Parent uses the memoized version of Player and that the second argument of memo is the function that always returns true, which means to never re-render. So, why does Player get re-rendered?

Upvotes: 0

Views: 109

Answers (0)

Related Questions