title: Difference between setting array equal to another one, or using three dots
body: <p>When using hooks in React and using an array as a state, I found that updating only one element of that state array with the setter function did not re-render the component. I was doing this:</p>
  
  <pre><code>const [listCollapsed, setListCollapse] = useState(Array(props.list.length).fill(false));
  
  const expandCollapse = (ind) =&gt; {
      let newListCollapsed = listCollapsed;
      newListCollapsed[ind] = !listCollapsed[ind];
      setListCollapse(newListCollapsed);
  
  }
  </code></pre>
  
  <p>where expandCollapse was a function called when pressing on a list element. I found that changing the first line of the function to:</p>
  
  <pre><code>let newListCollapsed = [...listCollapsed];
  </code></pre>
  
  <p>made it work. I was wondering what the explanation for that was.</p>