title: React .map not re-rendering
body: <p>I'm building a sorting algorithm visualizer, and in my return, I'm creating divs to represent vertical bars, in animatedBubbleSort() I'm swapping values in the state array on a timeout, the array IS being sorted, but what I expected to happen was that the .map function would be re-rendered each time the state is changed with updateArray(). But the .map function does not re-fire at all. </p>
  
  <pre><code>import React, { useState } from "react";
  import "../styles/App.css";
  import { Header } from "./Header";
  
  export default function SortingVisualizer(props) {
      const LOWER_BOUND = 5;
      const UPPER_BOUND = 200;
      const ARRAY_SIZE = 200;
  
  const [array, updateArray] = useState(fillArrayWithRandomValues);
  
  // returns a random number between bounds inclusive
  function randomNumberBetweenBounds() {
      return Math.floor(Math.random() * UPPER_BOUND) + LOWER_BOUND;
  }
  
  // fills array with random values
  function fillArrayWithRandomValues() {
      let tempArray = [];
      for (let i = 0; i &lt; ARRAY_SIZE; i++) {
          tempArray.push(randomNumberBetweenBounds());
      }
      return tempArray;
  }
  
  function animatedBubbleSort() {
      let tempArr = array;
      let len = tempArr.length;
      for (let i = 0; i &lt; len; i++) {
          for (let j = 0; j &lt; len; j++) {
              if (tempArr[j] &gt; tempArr[j + 1]) {
                  let tmp = tempArr[j];
                  tempArr[j] = tempArr[j + 1];
                  tempArr[j + 1] = tmp;
                  setTimeout(() =&gt; {
                      updateArray(tempArr);
                  }, 300 * i);
              }
          }
      }
  }
  
  return (
      &lt;div&gt;
          &lt;Header bubbleSort={animatedBubbleSort} /&gt;
          &lt;div className="array-container"&gt;
              {array.map((value, idx) =&gt; {
                  return (
                      &lt;div
                          style={{ height: `${value * 2}px` }}
                          className="array-bar"
                          key={idx}
                      &gt;&lt;/div&gt;
                  );
              })}
          &lt;/div&gt;
      &lt;/div&gt;
  );
  </code></pre>
  
  <p>}</p>