React state is not updating immediately after setState is being called

Question

I am building the frontend of a web based software and I want to add new note every time I press add button.

But it's simply not happening. New note is being rendered only when I change the state of another object. Right below I ma attaching the code. Please help, I am stuck here.

const [allnotes, setAllNotes] = useState(notes)

const addNote = () => {
  let notesAllTemp = allnotes;
  allnotes.forEach((n, index) => {
  if((n.id === clickedId)){
     notesAllTemp[index].notesDescs.push({id: 
      notesAllTemp[index].notesDescs.length+1,desc:''})
      setAllNotes(notesAllTemp)
    }
  });
}

If anyone can figure this out, please help.

Answer 1

Better if you first modify the array then update at once

const [allnotes, setAllNotes] = useState(notes)

const addNote = () => {
  let notesAllTemp = allnotes;
  allnotes.forEach((n, index) => {
    if((n.id === clickedId)){
      notesAllTemp[index].notesDescs.push({id: 
      notesAllTemp[index].notesDescs.length+1,desc:''})
    }
  });
  setAllNotes(notesAllTemp)
}