title: How to prevent react re-rendering images that are coming from an url?
body: <p>This is how my app looks like right now:</p>
  <p><a href="https://i.stack.imgur.com/9nC3i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9nC3i.png" alt="enter image description here" /></a></p>
  <p>The search and sort functions are working dynamically, as soon as I type a letter, it finds the match but re-renders all of them.</p>
  <p>If I type &quot;hunger&quot;, it finds the hunger games films, but it's getting images and rendering when it already has them. Is there any way to make this process just for once so I don't wait for every search, every sorting?  I use Redux so data is coming from store, store is getting the data from local json file.</p>
  <p>I thought about storing on local storage but I couldn't figure it out. As you can see there is no ComponentDidMount or Hooks.</p>
  <p>This is the code of this page:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;./MoviesAndSeries.css&quot;;
  import ListShowItem from &quot;./ListShowItem&quot;;
  import { getVisibleShows } from &quot;../Redux/Selector&quot;;
  import { connect } from &quot;react-redux&quot;;
  import FilterShowItems from &quot;./FilterShowItems&quot;;
  const Movies: React.FC = (props: any) =&gt; {
    return (
      &lt;div className=&quot;movies&quot;&gt;
        &lt;FilterShowItems /&gt;
        {props.movies.map((movie: any) =&gt; {
          return &lt;ListShowItem key={Math.random()} {...movie} /&gt;;
        })}
      &lt;/div&gt;
    );
  };
  
  const mapStateToProps = (state: any) =&gt; {
    return {
      movies: getVisibleShows(state.movies, state.filters),
      filters: state.filters,
    };
  };
  
  export default connect(mapStateToProps)(Movies);
  </code></pre>