In another state

State, updating state, changing state, you might be thinking. ok get out of town! What is this state?

This was a confusing concept for me to grasp at first, so I wanted to provide a "explain it like I'm 5" sort of explanation that is sure to help someone.

So in vanilla javascript you can and do declare variables, variables are really not much different than algebra variables you used back in math class. However, if you want to change variables it changes more of the app/code. Enter, React and state management tools. React's selling point is you can easily and efficiently update your code and set different states which creates a better development experience.

A good way I like to think of state is a paint tray (hear me out!) In art class you mixed different colors on your palette to make the perfect color which you can reuse again and again. That mixed color is the app's state and the pieces you are mixing in are the variables.

As tricky as state sounds its just a way to make a variable or variables so you can group variables/functions together.

Back to the paint example. If you are painting a picture and using your mixed color for the clouds and now you want to for the tree, it does not change any aspect of the painting and you are still free to use whatever colors you want for other areas of the painting.

Hope that helped, personally I found abstracting state into mixed paint colors as a very useful way to really understand it.