title: How can I add a new item and render it without the timeout? React
body: <p>I have this code, basically is for adding a new item to a list.</p>
  <pre><code>import './styles/app.css'
  import {useState, useEffect} from 'react'
  
  
  const initialList = [
    {title: 'Group 1', items: ['Item 1', 'Item 2', 'Item 3']},
    {title: 'Group 2', items: ['Item 1', 'Item 2']}
  ]
  
  function App() {
  
    const [dale, setDale] = useState(true);
    const [list, setList] = useState(initialList);
    
    const handleAdd = (e)=&gt;{
      setDale(false);
      const newList = list;
      newList[e.target.parentNode.id-1].items.push('New');
      setList(newList);
      setTimeout(() =&gt; {
        setDale(true);
      }, 1);
      
    }
  
    return (&lt;div&gt;{dale ? &lt;div className=&quot;App&quot; key=&quot;app&quot;&gt;
    {list.map((group, groupI)=&gt;{
      return (
        &lt;div id={groupI+1} key={groupI+1} className=&quot;dnd-group&quot;&gt;
            &lt;div className=&quot;dnd-title&quot;&gt;{group.title}&lt;/div&gt;
            {group.items.map((item, itemI)=&gt;{
              return(
                &lt;div draggable key={itemI+1}className=&quot;dnd-item&quot;&gt;
                  Item {itemI+1}
                &lt;/div&gt;)
            })}
            &lt;div className=&quot;dnd-añadir-item&quot; onClick={handleAdd}&gt;Add&lt;/div&gt;
          &lt;/div&gt;
          )
          })}
        &lt;/div&gt;:&lt;div&gt;No vuic&lt;/div&gt; }&lt;/div&gt;
    );
        
  }
  
  
  
  export default App;
  </code></pre>
  <p>If I delete the timeout function and the 'dale' state the list keeps updating itself but is not updated in the render.
  I want to know how to render the updated list without this absurd timeout and 'dale' state.</p>