title: React.js -- state not updating in functional component
body: <p>I have a functional component with a state hook called &quot;checked&quot; that is an array of Booleans for a list of checkboxes. When a checkbox is clicked, I have an event handler that updates state so the checkbox will render a check or an empty box.</p>
  <p>According to the console.logs in my function, state is updating, but the checkboxes are not responsive in the browser and dev tools confirm that state is not updating. If I manually toggle state using the dev tools the checkboxes work just fine, so I believe it's an issue with state not updating. Any advice would be very appreciated!</p>
  <pre><code>import React, { useState, useContext } from 'react';
  
  export default function MessengerCheckboxes() {
   const [checked, setChecked] = useState([false, false, false]);
  
  ...
  
   const handleChangeChild = (event) =&gt; {
     console.log('Currently state is: ' + checked); // Currently state is: [false, false, false]
  
     let index = parseInt(event.target.id.slice(0, 1));
     let localChecked = checked; //
     localChecked[index] = !checked[index];
      
     console.log('State should be: ' + localChecked); //State should be: [true, false, false] [[for example]]
     setChecked(localChecked);
      
     setTimeout(() =&gt; { // Added setTimeout for troubleshooting to make sure I wasn't calling state too quickly after setting it
         console.log('State is now: ' + checked); // State is now: [true, false, false] [[but won't trigger re-render and dev tools show state is [false, false, false]]
     }, 1 * 1000);
   };
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/vi03j.png" rel="nofollow noreferrer">Image of my console.log</a></p>
  <p><a href="https://i.stack.imgur.com/3GJTK.png" rel="nofollow noreferrer">Image of my dev tools</a></p>