Reputation: 8011
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