title: useEffect not getting trigger after state change
body: <p>I'm making a custom dropdown, that allows for pushing new items in the dropdown.  For some reason the useEffect is not being triggered on state change, but it being triggered on initial render.  I'm pretty sure I'm missing something small, but can't see it. The new item should be pushed when a user clicks on the button tied to the 'addNewOptionToTree' method.  The categoryList should then show the new item in the dropdown.  The console log gets triggered and the new arr is present... Any ideas?</p>
  <p>above return:</p>
  <pre><code>    const [newOption, setNewOption] = useState('')
  
      const [categoryList, setCategoryList] = useState([&quot;Calendars&quot;, &quot;Meetings&quot;, &quot;Apostrophes work!&quot;])
  
      useEffect(() =&gt; {
          console.log(&quot;categoryList::::::::::::::::&quot;, categoryList)
        }, [categoryList]);
      
      
        function addNewOptionToTree() {
          console.log('category:', categoryList);
          console.log('newOption:', newOption);
          const categoryListArr = categoryList
          categoryListArr.push(newOption)
          setCategoryList(categoryListArr)
          console.log(&quot;category:&quot;, categoryListArr);
      
        }
  </code></pre>
  <p>in return block:</p>
  <pre><code>&lt;div className='dropDownList'&gt;
            &lt;div className='listItem' key={'add-item-key'}&gt;
              &lt;Input
                type='text'
                label=''
                value={newOption}
                placeholder='Add New Category'
                onChange={val =&gt; setNewOption(val)}
              /&gt;
            &lt;div className='icon-add-contain dropdown-add-btn' onClick={addNewOptionToTree}&gt;&lt;/div&gt;
            &lt;/div&gt;
            {
              categoryList.length &gt; 0 &amp;&amp;
                categoryList.map((category, index) =&gt; (
                  &lt;div className='listItem' onClick={onOptionClicked(category)} key={'level1-'+index}&gt;
                    {category}
                  &lt;/div&gt;
                ))
            }
          &lt;/div&gt;
  </code></pre>