4

I have experience with Angular and Vue and am beginning to learn React.

Why are all variables that aren't passed from a parent component stored in the state object instead of at the root of the class? Also, why does React require a special method (setState) to change the value of a variable? Variable values can be changed directly, but unless setState is used, the view won't update.

In Angular:

this.variableName = 'new value';

In React:

this.setState({
  variableName: 'new value'
});
1
  • 4
    setState is required to notify React to re-render the DOM. Unlike Angular, this method is way more efficient and fast. Feb 19, 2018 at 16:15

2 Answers 2

3

Why are all variables that aren't passed from a parent component stored in the state object instead of at the root of the class?

This is so that all state relevant to a specific component is stored in one local place. React monitors state changes as a queue to re-render the virtual DOM. Hence the need to call setState({...})

Also, why does React require a special method (setState) to change the value of a variable?

This method is used in part to prevent one from mutating the state directly with calls similar to this.state.bar = foo. This promotes good coding principles in development. Again, React will use this method call as a catalyst to drive its executing of the React Component Lifecycle which includes re-rendering the virtual DOM which will in most cases lead to an updated UI.

Here is Facebooks explanation on what this.setState() is doing.

2
  • setState is NOT a pure function. It is in fact one of the only side-effecty, imperative things in the React API. Feb 19, 2018 at 16:22
  • 1
    It would appear you are correct, I will update, though the outcome is the more or less the same as manipulating the state directly with calls similar to this.state = foo; are a no no in React. this.SetState adds a request to the react update queue and updates this.state once the request is ready to be processed, it does so by merging the new state with the old NOT by creating a new object altogether therein not a pure function. Thanks for the heads up. Feb 19, 2018 at 16:32
2

It seems to be a design decision.

First of, state is usually used to hold something local to the component which can be changed by user action or a push updates from the server etc. - something like whether a checkbox is ticked or not, or the input value from a textbox. The keyword is that it's local to the component and there's no reason for it to be "at the root of the class" (whatever that means precisely). There are extra constructs on top of that, such as redux/flux etc, and those are a bit more global, but it's not required for regular and small-scale React.

The same can be said about the usage of setState - it's a design decision. It's not needed, and React could probably use the same approach Angular does, which is scanning of component state fields changes on certain application-level events. It'd be even easier since all that's considered "state" is put into the state field, and all that influences rendering is in either state or props (and possibly context). But I find the very explicit setState approach much more reasonable - the points at which state changes and a render is triggered are much more well defined than Angular's "sometime in the future"/magic approach.

A related thing is that in React there's just a unidirectional data flow. Basically DOM = f(State, Props). And any change to the state must be explicit. So for an <input> element, you'd supply a value attribute, but also an onChange attribute. The latter is a function invoked on a change, and it will, at some point setState and change the state field feeding into the value attribute (as part of the render). Contrast this to Angular where, AFAIK, you'd just supply the value and there would be a bi-directional data flow between the input and the state. It looks nicer locally, but it's a pain to work with when composing components - so much so that the pattern I've used most often in Angular for dealing with it was basically what React is doing. Again, a design constraint which makes you write more code, but also provides a much more saner development experience.

Overall React has a much stricter approach to building the UI than Angular does, or even jQuery or plain-ol-javascript. For some that's a bonus, for other's it's annoying. I've used all three, and I'd choose React for all future work.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.