In React why do we need state variable when we have local variable ?

So as a React developer, it is important to understand the significance of state variables in React development. React requires state variables as it does not keep track of local variables, so when you attempt to modify them, React does not re-render the DOM.

In React, state is a JavaScript object that stores data that can be modified over time. When the state of a component changes, React updates the UI to reflect the new state. The setState() method is a built-in method in React that is used to update the state of a component.

React keeps track of changes made to state variables. When a change is detected, React automatically re-renders the DOM tree using a process called reconciliation. The reconciliation process uses a diff algorithm to determine the most efficient way to make changes to the DOM tree, ensuring that updates to the UI are fast and efficient.

The primary advantage of using state variables is that they enable the efficient management of complex and dynamic user interfaces. By using state variables to manage the state of a component, the user interface remains responsive and up-to-date with user input.

Thank You!

Comments

[Shaktijeet Sahoo]

To add to this:

React maps your state, e.g. useState, values to elements in the virtual DOM, i.e. each time a component is created and useState is called, the setState function is bound to the element. When you call setState and the object reference, mark the word reference* here, changes, React marks the element as "dirty". The reconciliation process takes into account the dirty or changed nodes and makes changes to the vDOM and then the updated vDOM is rendered in the DOM.

---

PS
*reference: React checks the equality of values based on reference to the state objects. Reference is basically the abstracted memory location of an object in JS. If you do {} == {} you'll get false but const x = {}; const y = x; x == y gives you true. This doesn't apply to non-object values, like string, or number, or booleans.

[Sohil Lalakiya]

Thank You!

[Swagat0795]

Great insight!

[Sohil Lalakiya]

Thank You!

[JWP]

Nice

[Sohil Lalakiya]

Thank You!

[Crudhunt]

Good one!

[Sohil Lalakiya]

Thank You!

[Alex Lohr]

The problem with re-running components is that you will inevitably run code multiple times that will not yield meaningful change. To counter that issue, react gives you trapdoors out of its over-reactivity in the form of state, memos and effects.

Unfortunately, ref-counting is required to sync those trapdoors between runs, which imposes the hook rules on every react developer.