The problem React was invented to fix

1The pain: manual re-rendering

Remember the vanilla Notes app? Every time the data changed, you had to rebuild the HTML and redraw the list:

// the vanilla JS way — you manage the DOM by hand
function render() {
  list.innerHTML = "";                    // wipe
  notes.forEach(n => {                     // rebuild
    const li = document.createElement("li");
    li.textContent = n.text;
    list.appendChild(li);
  });
}
addBtn.addEventListener("click", () => {
  notes.push(newNote);
  render();   // ← you must remember to call this EVERY time
});

2The React idea: describe, don't redraw

React flips it around. You write a function that says "for this data, the UI looks like this". When the data changes, React re-runs your function and updates only what actually changed — automatically.

3The same list, the React way

// React: describe what the UI IS for the given notes
function NoteList({ notes }) {
  return (
    <ul>
      {notes.map(n => <li key={n.id}>{n.text}</li>)}
    </ul>
  );
}
// change notes → React re-renders. No manual DOM code, ever.