Why So Much React for STATE

Harshith Venkatesh
3 min readJun 28, 2020

Believe it or not, after a month of learning here and there and replicating someone’s project, oops I mean inspired by other projects, I have started to love React.

There came a turning point where I met my first villain in React called React hooks, It was so confusing and I used to get warnings in red colors to give up, but youtube came to my rescue, So I thought of taking one topic called State to give my perspective on the same.

We know that in React there are stateless components and stateful components. Stateless components just have like one input and output and nothing changes over there whereas state components are components that contain state where we observe constant change and iterations over the component every time something changes within the state. A state can be passed downwards to other components through props.

What is State though? React components has a built-in state object.
The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Let’s take the most famous project popularly known as the To-Do List. While I was working on my To-Do List project I realized why I use state…

My Take on To-Do List, Pardon my horrible CSS

If we observe the above react to-do list, the task can be filled easily and a bunch of tasks is present here and there. Every time user enters the task state gets updated as something gets added to the list. So basically if you want to use state think of a situation where every time, there is constant change/modification in the data.

How to update a state? In order to update a state, we need to pass a function instead of an object to setState , to ensure the call always uses the most updated version of the state. Here is an example

I know this is like touching the tip of the iceberg. This was something I always wanted to write and explore more on as it looked interesting. I will keep on adding more to this and will update you guys. This is more like a first draft.

I believe this would help someone, I am new to the blogging world, so pardon If I have written something wrong. Open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)

--

--

Harshith Venkatesh

A Vivid Learner, Developer, loves cooking, exploring javascript currently