title: How to update the state immediately in React functional component?
body: <p>I am new to React and I am very confused about the lifecyle of a functional component.
  Let's say I have many inputs of type: checkbox, a, b, c and d. Their values are a, b, c and d.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const OnBoarding = () =&gt; {
    const [isChecked, setIsChecked] = useState({
      a: false,
      b: false,
      c: false,
      d: false
    });
    
    const [allCheckedItems, setAllCheckedItems] = useState([]);
    
    //Write function that pushes checked value to state array when clicked
    const onChecked = e =&gt; {
      setIsChecked({
        ...isChecked,
        [e.target.value]: e.target.checked
      });
      const all = Object.keys(isChecked).filter(function(key){
        return isChecked[key] === true;
      });
      console.log("all items that are TRUE : " + all);
      setAllCheckedItems([all]);
      console.log("allCheckedItems : " + allCheckedItems);
    };
    
    useEffect(() =&gt; {
      console.log(isChecked);
    });
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a functional component with a state whose type is an <strong>object</strong> with many properties, all booleans, like so:</p>
  
  <pre><code>const [isChecked, setIsChecked] = useState({
    a: false,
    b: false,
    c: false,
    d: false
  })
  </code></pre>
  
  <p>I have an other state that is an <strong>array</strong>, let's call it <strong>allCheckedItems</strong>, that is supposed to be an array of all the keys of <strong>isChecked</strong> set to true.</p>
  
  <pre><code>const [allCheckedItems, setAllCheckedItems] = useState([]);
  </code></pre>
  
  <p>With a function onChecked, when a checkbox is checked, it's value in the <strong>isChecked</strong> object sets to <strong>true</strong>.</p>
  
  <p>I call useEffect() in which I wrote a filter function to filter all properties that are true. All the properties set to true are store in an array called <strong>"all"</strong>.</p>
  
  <p>My problem comes when I have to update the state of the array <strong>allCheckedItems</strong>. If I write in the useEffect hook:</p>
  
  <pre><code>setAllCheckedItems([all]);
  </code></pre>
  
  <p>I get an infinite loop. If I write it in my <strong>onChecked function</strong>, whenever I click on a checkbox, the state of allCheckedItems that I log in the console is LATE of one click.
  Like, I click to check "a" and it logs:</p>
  
  <pre><code>[]
  </code></pre>
  
  <p>Then I click on "b" and it logs: </p>
  
  <pre><code>[a]
  </code></pre>
  
  <p>Then I click on "c" and it logs: </p>
  
  <pre><code>[a, b]
  </code></pre>
  
  <p>I would like that when I check a box, both states update and that allItemsChecked logs all items checked immediately... 
  Can someone explain to me this behavior? It has given me headaches for days now.</p>