4 ms·

Why is state management such a talked-about issue with React? Other than distributed state, which obviously comes with its own set of challenges, managing state

Why is state management such a talked-about issue with React? Other than distributed state, which obviously comes with its own set of challenges, managing state doesn't seem to be an issue with any other language, framework or platform. But with React, it seems to be a major part of the learning curve, with entire tutorials dedicated to it and numerous libraries to help with it in some way.

acemarke 7y ago
Because React, more so than the other frameworks, puts such a strong emphasis on "the UI output is entirely based on your state", while at the same time there are some limitations to tracking state in ways that are inherently tied to your UI hierarchy.
- danellis 7y ago
  > the UI output is entirely based on your state How could anything else be true?
  - acemarke 7y ago
    If you look back at a typical 2011-ish jQuery app, the exact opposite is true. You might have a modal visible in the page, but the only indication code-wise that the modal existed was in the DOM itself, because there was a one-time mutation of the DOM via `$("#my-modal").dialog()`. The only way any part of the app could _know_ if that modal was being shown was to check on the actual DOM itself, like `$("#my-modal").is(":visible")`. Then you start getting into weird bugs because maybe some other script has mutated the portion of the DOM you cared about, or you're having to write logic to handle if the DOM _was_ in this state and now needs to be in _that_ state. What we've learned over the last decade or so is that while that is fine for adding small amounts of interactivity to the page, it's not a maintainable way to build large-scale application codebases. Instead, you want to have an actual `isModalVisible : true` boolean be the real source of truth, and the UI should just be a reflection of that value. I'm not saying that React invented this idea or that it's exclusive to React, just that React's docs and community has generally put a stronger emphasis on that specific mental approach to designing the app: https://reactjs.org/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state https://reactjs.org/docs/thinking-in-react.html#step-3-ident...
  - monocasa 7y ago
    What they're saying is that there was no clear separation between model view and controller. Now they've really embraced view (React) as a pure function of model (Redux) that has very clear way that events modify state coming from the controller (your business logic).
ng12 7y ago
Because managing state is really the major unsolved problem in front-end. No framework has it really solved -- but in React (and Vue) the other stuff is so easy that the issue of state management because much more pronounced.
aryehof 7y ago
> Why is state management such a talked-about issue with React? The "state problem" that exists in React, Vue, Flutter etc. is due to their maintaining components in a hierarchical tree. It is a manifestation of a "cost" (drawback) in that tree-based approach. React represents elements as encapsulated components that can be composed into more complex elements, which are maintained in a hierarchical tree. That's the main attraction. One can reason about independent pieces representing some aspect of UI. Those pieces can be building blocks used to build more complex things. The price for this is that how these (encapsulated) components communicate and share data between them is problematic because of that hierarchical tree structure, where an element only knows its parent and child(ren).

acemarke 7y ago

Because React, more so than the other frameworks, puts such a strong emphasis on "the UI output is entirely based on your state", while at the same time there are some limitations to tracking state in ways that are inherently tied to your UI hierarchy.

danellis 7y ago
> the UI output is entirely based on your state How could anything else be true?
- acemarke 7y ago
  If you look back at a typical 2011-ish jQuery app, the exact opposite is true. You might have a modal visible in the page, but the only indication code-wise that the modal existed was in the DOM itself, because there was a one-time mutation of the DOM via `$("#my-modal").dialog()`. The only way any part of the app could _know_ if that modal was being shown was to check on the actual DOM itself, like `$("#my-modal").is(":visible")`. Then you start getting into weird bugs because maybe some other script has mutated the portion of the DOM you cared about, or you're having to write logic to handle if the DOM _was_ in this state and now needs to be in _that_ state. What we've learned over the last decade or so is that while that is fine for adding small amounts of interactivity to the page, it's not a maintainable way to build large-scale application codebases. Instead, you want to have an actual `isModalVisible : true` boolean be the real source of truth, and the UI should just be a reflection of that value. I'm not saying that React invented this idea or that it's exclusive to React, just that React's docs and community has generally put a stronger emphasis on that specific mental approach to designing the app: https://reactjs.org/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state https://reactjs.org/docs/thinking-in-react.html#step-3-ident...
- monocasa 7y ago
  What they're saying is that there was no clear separation between model view and controller. Now they've really embraced view (React) as a pure function of model (Redux) that has very clear way that events modify state coming from the controller (your business logic).

ng12 7y ago

Because managing state is really the major unsolved problem in front-end. No framework has it really solved -- but in React (and Vue) the other stuff is so easy that the issue of state management because much more pronounced.

aryehof 7y ago

> Why is state management such a talked-about issue with React? The "state problem" that exists in React, Vue, Flutter etc. is due to their maintaining components in a hierarchical tree. It is a manifestation of a "cost" (drawback) in that tree-based approach. React represents elements as encapsulated components that can be composed into more complex elements, which are maintained in a hierarchical tree. That's the main attraction. One can reason about independent pieces representing some aspect of UI. Those pieces can be building blocks used to build more complex things. The price for this is that how these (encapsulated) components communicate and share data between them is problematic because of that hierarchical tree structure, where an element only knows its parent and child(ren).