What the hell is a state in web applications
NOTE: I will be calling pure JavaScript applications built with HTML/CSS which uses no state management library and which is not single-page application as Non-React application for the rest of this article.
The state of X is the source of information of X at any point in time.
I have been developing websites for quite some time, but I never took the STATE word seriously. The word STATE is used a lot in React and other frameworks but not so often in the Vanilla or other old libraries.
Here are the questions that crossed my mind when I was done learning the basics of React:
- What about the Non-React apps? How do we maintain their state?
- Does the state really matter in the web app?
These are the questions that got me curious to research this topic and write this article.
Let us start by understanding what a state is in React and how it is managed
In react, the state is linked to a component. It holds the value of variables and when the state of a component changes, React re-renders the UI and produces a new DOM.
The state is retained throughout the lifespan of the component unless it is explicitly cleared.
When the size of the application increases, passing states around becomes tedious hence we create a global state container called STORE.
With these concepts of state and store in mind let us go ahead and understand how it is implemented in non-react apps.
How does state work in non-react applications?
Consider an input field in a form. When we type something on it, no matter where we go on the page the value will never change or get cleared until we do it by ourselves.
This is the state of that form field.
Even though we don’t mention the state explicitly while developing an app, every element does maintain its local state.
But how are some values retained when we navigate from one page to another in react?
React is used to build a Single Page Application or SPA. In SPA, the pages dynamically re-render the new content rather than loading an entirely new page.
Any new page you see is just another component and all the components are wrapped inside the main component which shares a common state.
What happens when we navigate in a non-react application? What happens when we refresh a form page which is filled but not submitted yet?
Well, we lose all our state data and we get a fresh form, nothing is filled.
When we navigate from one page to other we flush out all the state data and a fresh new page is loaded.
But most Non-React applications retain some data even after navigation right?
Yes, they do. Like user logged-in info, user’s name, preference, etc.
But it’s not straight forward as it is with react applications. We do not have a STORE or global state which will retain data for us.
Instead, we make use of the browser cache to retain the values needed throughout the application. There are multiple browser-based data stores like session storage, local storage, cookies, etc which can be used to store the application data.
What happens to the state or store when we refresh a react app?
Yes, we lose all the state or store data. Even though we have maintained the store, once refreshed, the data is gone. Browser flushes it all.
The only way to save the data even for react apps is to make use of browser store or caching techniques.
So to conclude, though the word state is been used a lot in react, it is nothing specific to react nor is the store. Every web application maintains its local state.
It’s just easy to use those things provided by some library (react) instead of creating something on our own. And the only way to retain data for a longer time even after the page is refreshed or if the browser is closed is to make use of browser features.
I hope you found this article useful. I would love to hear your thoughts. 😇
Thanks for reading. 😊
Cheers! 😃
If you find this article useful, you can show your appreciation by clicking on clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.
