As an example of how user interactivity can change the state, try clapping for this post and watch how the clap icon changes color and the total clap number increases.
Those are two examples of state in one tiny component of the overall page!You may have taken it for granted that the page did not have to reload to display the new information about your claps.
The question that remains is: What is managing the state itself?There is a program behind the scenes that listens to all the actions you make on the website and updates the state accordingly.
Let’s look at these tasks in detail.
For instance, imagine a settings page of a website that has many checkboxes for various settings.
How frustrating would it be if you went through and selected all of your settings, only for you to come back later and realize they were not all saved.
It is up to the web developer to design a good program that will prevent any out-of-sync issues from occurring.
A modern website must be able to respond to and handle all actions made by the user, and keep the UI up to speed.
Performing background tasks to get information to/from the serverThe final question is: how does the rest of the Medium world know that you clapped for the post?When you type in a URL and receive back a web page, you are viewing a document sent to you by the server of the website you are on.
You can view and interact with the document, but any changes you make to it will only be reflected in your own browser and will not persist to the resource on the server.
In order to update the information on the server, additional requests or messages have to be made to the server.
Typically, these requests are tied to interactions on the UI.
When the button is clicked, a message is sent to the server to update the claps on the page.
The server responds with the new number of total claps and the number of times you have personally clapped.
The User Interface is updated with the new number of total claps, as well as highlighting the hand button, indicating that you have personally clapped for the post.
It does not require a page reload to fetch new information as it did in the early days of the web.
This is perhaps the most important evolution that led to the modern web, with fully fledged applications running in your browser.
I have taken a couple of liberties in explaining how it works, but I believe I have represented all the information accurately.
The most important piece of information to take away from this post is how to think about websites in terms of their state.
Doing so will make you a far better web developer!FootnotesYes, I realize people have done crazy things with only CSS like building a fully functionally chat application, but that is not its intended use.