How do I save a webpage state to mongodb without spamming http requests?

I have a to-do list that works like trello, with lists and draggable cards. I have the app functioning with both saving the state of the cards to mongoDB and localstorage using JSON. What I don't understand is how I am supposed to be constantly updating mongoDB every time I move or edit a card. It seems there must be a different way. Just for reference - this is the function I am using to update the DB entry. It saves and renders, but it feels wrong to be doing this with each state change.

async function mainUpdate(data) {
  const uri =
    'mongodb+srv://xxxxxxxxxxxxxxxxxx.mongodb.net/test';

  const client = new MongoClient(uri);

  try {
    await client.connect();
    await updateListingByName(client, 'user-jeff', { cachedState: data });
  } finally {
    await client.close();
  }
}