DEV Community

Dushyant Pathak
Dushyant Pathak

Posted on

2 2

Teach state to a 5 year old

State is an often tricky concept for noobs, and here is an attempt to simplify it through a real life example.

State is a snapshot of how things were at a particular point of time. In a web page. Period.

The background might have been blue, the variable hello might have had the value 10, the array might have had 15 elements. All these are part of state at a particular time.

Let's say we have to make a simple counter app, which can just increment and decrement a number on the screen. The click of a particular button will increment, and the other will decrement.

Everytime any of the buttons is clicked, the state of the number visible on the screen changes, and the same is reflected on the screen.

Similarly, an event happening can also be a state change, such as the change in window size of the browser.

State management is complex because changing state the incorrect way can lead to unexpected results, and is often very hard to debug, since there is no actual syntactic error.

Angular uses libraries like NgRX for state management, and React uses Redux.

Mutating state means to make changes to the existent state, and it is good practice in React to not modify state directly, as it leads to unexpected views. More info here.)

Cheers! Happy coding

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more