Application state in js. How to update it, how to work with it correctly?

Question

JavaScript

Please explain the general logic of how to properly organize work with state in a js application.
There is a server that stores data in the database. There is a front that should display the contents of the database.
Where is state here?
The front on the event directly sends a post to the server, the server updates the database, the server sends data to the front, the front receives data and writes to the state, which causes the page (view) of the application to be updated.
Or does Front on event update the state on the front, which then entails sending a post to the server, etc.?
I would be grateful for advice, an example or a link where to read.
Thanks

Answer 1

And so and so it is possible
On the example of adding a row to the table:
1. new row -> send to the server -> get a table with the added row -> assign to a reactive variable -> update the interface
2. new row -> assign to a reactive variable and send to the server - > UI update. We get a response from the server. If there is an error, then we report it and then the options are either to try again or to score.
The second option is essentially an optimistic update, google what it is.
The second option is more difficult to implement, but more user friendly.

Answer 2

It all depends on how you want to design the client-server relationship of your applications. It is possible in different ways.
I don’t use it myself, but as an example, I can give the Fullstack framework - Meteor.
There data is transmitted real-time. That is, the data on the client reacts to changes in the data on the server:

Meteor provides full stack reactivity, allowing your UI to seamlessly reflect the true state of the world with minimal development effort.

Answer 3

The fact of the matter is that I don’t know how to do it and would like to know a specific one of the examples (I understand what they do differently)