title: Prevent Re-rendering inside a map React
body: <p>I'm trying to make a clone of netflix, when I have the mouse over a image of the movies the trailer of that movie appears, there appears the problem when i mouseover i have many same outputs in the console. I think this problem is because im rendering inside a map, but im looking for avoid that for the performance... I tried with React.memo but doesn't work.</p>
  <p>Here is an example</p>
  <p><a href="https://i.stack.imgur.com/i81ja.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i81ja.jpg" alt="enter image description here" /></a></p>
  <p>I have a parent component</p>
  <pre><code>function MovieList(props) {
  ...
      &lt;Movies movies={netflixMovies} title=&quot;Movie Feature&quot; /&gt;
  }
  </code></pre>
  <p>Inside the child component i have the following</p>
  <pre><code>function Movie(props) {
  ...
  const showMiniVideo = (id) =&gt; {
      setTimeout(() =&gt; {
        fetchYoutubeVideo(id) // Function who give me the ID of youtube video
          .then(res =&gt; {
            if (res.results.length === 0) { // If doesn't exist a video i set existVideo false
              setExistVideo(false)
              return setIdYoutubeVideo() // IdYoutubeVideo none
            }
            else {
              setExistVideo(true) // If exist a video i set existVideo true
              res.results.map(thriler =&gt; {
                return setIdYoutubeVideo(thriler.key) // IdYoutubeVideo id
              })
            }
          })
          .catch(err =&gt; {
            setExistVideo(false)
            console.error(err)
            return setIdYoutubeVideo()
          });
      }, 1000);
    }
  
  ...
  
  return (
  {movies.map(movie =&gt; (
                &lt;div key={movie.id} className=&quot;tile&quot;&gt;
                    &lt;div onMouseOver={() =&gt; showMiniVideo(movie.id)} onMouseOut={stopMiniVideo}&gt;
                      {idYoutubeVideo ?
                        (idMovie === movie.id ?
                          (existVideo ?
                            console.log(&quot;hay video&quot;)
                            :
                            console.log(&quot;no hay video&quot;)
                          )
                          :
                          console.log(&quot;no es el id&quot;)
                        )
                        :
                        &lt;svg style={{ color: 'white' }} width=&quot;1.5vw&quot; height=&quot;1.5vw&quot; viewBox=&quot;0 0 16 16&quot; className=&quot;bi bi-play-fill&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                          &lt;path d=&quot;M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z&quot; /&gt;
                        &lt;/svg&gt;
                      }
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              ))}
  )}
  </code></pre>
  <p>Any one have an idea? I would appreciate any help</p>