Firebase: When to use onSnapshot

So I know that you should keep the frontend and backend in sync using onSnapshot if the user is looking at a page that can be updated by other users for example. But let's say the user is looking at a page that only he can update, like a page displaying some personal information.

Let's say I have this string let someData = "Some string" that gets rendered on that page only one user can update. Now that user wants to update the data in that string. So a firestore document might get updated like this:

const db = firestore();
const someValue = "Some other string"  //This value is set through a form for example
db.collection("SomeCollection").doc("SomeDoc").update({data:someValue})

Now that data change should obviously get displayed in the UI.

Here is my question. Given the fact that only the user can see the data on this page, what is the correct way to update the UI?

const db = firestore();
db.onSnapshot(snapshot=>someData = snapshot.data().data);
const someValue = "Some other string"  //This value is set through a form for example
db.collection("SomeCollection").doc("SomeDoc").update({data:someValue});

OR

const db = firestore();
const someValue = "Some other string"  //This value is set through a form for example
db.collection("SomeCollection").doc("SomeDoc").update({data:someValue});
someData = someValue;

What I mean is should I update the UI independently of the database or as a response to a document change to the database.

Hope I could make my question clear. Thanks in advance!

If you have a snapshot listener attached to a document, and you write code to update that document, the listener will get immediately invoked (even before the change happens on the server). There should be no need to update the UI outside of the listener - just let the listener respond to the update immediately and update the UI itself.