Till the last article, we have been dealing more with the UI part of React. Now let's get shifted to the Data part of react. Data brings life to the react application because what is the point of building an application when there is no data to display?
We basically go to the website because we need information.
What is information? Making sense of Data
Data can be anything from words to images. Data can be static or dynamic. Static data include blogs, landing pages etc. Dynamic data is all around us like OTT platforms, live streaming etc. In fact, in the real world, all web applications are combinations of static and dynamic data.
So in a way helps us to place data according to the layout we design.
We know that React is based on Elements. We use a function that returns elements and the corresponding functions are called Components. Therefore react is made up of components and hence web application is based on permutations and combinations of components.
This essentially means the component uses data.
In simpler terms , Component = Placement of data in layout
If the component uses static data, we hardcode it static webpage in the early 2000s. If the component uses dynamic data, we use State.
Note: State and Props are different though they seem like overlapping
We call something a state when we measure/observe it in a specified time. This essentially means it has past, present and future. Take, for example, I store live scores by a cricket team in a variable X.
Ask this question,
Is X static or dynamic? Obviously, it is dynamic because X start with zero runs and finish with some finite number unknown. Therefore X variable has a past, present and future.
In the case of the web, the State changes the content of the page/layout. Therefore I need to change the DOM(virtual and real). This causes a new render.
This re-rendering(new render) is caused by state change and the component host the change(i.e state change). This means a component that hosts have total control over the state.
I know I oversimplified many things if you happen to be using State already.I wanted to give some intuition behind state.