title: Avoid rerendering a list in React Hooks
body: <p>I have a list of images that render on page load via a <code>map</code> function. I want to be able to select one or more images, and highlight them. Additionally, the selected images' titles will display at the top of the page. The issue I'm running in to is that the list seems to rerender every time I select an image.  Here is the component:</p>
  
  <pre><code>export default function App() {
    const [images, setImages] = React.useState&lt;Image[]&gt;([]);
    const [selected, setSelected] = React.useState&lt;boolean&gt;(false);
    const [imageTitles, setImageTitles] = React.useState&lt;string[]&gt;([]);
  
    const handleImageSelection = (title: string, index: number) =&gt; {
      setSelected(!selected);
      const imageExists = imageTitles.indexOf(title) !== -1
      if (!imageExists) {
        setImageTitles([...imageTitles, title]);
      } else {
        setImageTitles(imageTitles.filter(str =&gt; str !== title));
      }
    }
  
    return (
      &lt;div&gt;
        {console.log(images)} // The images array renders every time
        &lt;div&gt;{imageTitles.map(title =&gt; &lt;p&gt;{title}&lt;/p&gt;)}&lt;/div&gt;
  
        &lt;section className="images"&gt;{
          images.map(({ title, image}, index) =&gt;
            &lt;img
              style={{
                marginBottom: 4,
                border: imageTitles.indexOf(title) !== -1 ?
                  "4px solid blue" : "", // A selected image is highlighted
                borderRadius: 16
              }}
              src={image}
              alt={image}
              onClick={() =&gt; handleImageSelection(title, index)}
            /&gt;
          )
        }&lt;/section&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I'm wondering if it's because I am changing the size of the <code>imageTitles</code> array (and hence, the <code>index</code> values) every time an image is selected/unselected.</p>
  
  <p>I also tried <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" rel="nofollow noreferrer"><code>useCallback</code></a> like so:</p>
  
  <pre><code>const handleImageSelection = React.useCallback((title: string, index: number) =&gt; {
    setSelected(!selected);
    const imageExists = imageTitles.indexOf(title) !== -1
    if (!imageExists) {
      setImageTitles([...imageTitles, title]);
    } else {
      setImageTitles(imageTitles.filter(str =&gt; str !== title));
    }
  }, [selected, imageTitles])
  </code></pre>
  
  <p>But it didn't seem to do the trick.  My guess is because <code>imagetitles</code> changes every time.</p>
  
  <p>So, is it possible (for performance reasons) to avoid rerendering the list of images every time an image is selected/unselected?</p>