Why to store data in state in react

Question

I want to understand what we lose if we don't store the data in state. We can still trigger re-render by using this.setState({}). Please provide in-depth analysis.

Note that I am not concerned to maintain the state of application(usually done via Redux, Mobx etc.)

class App extends React.Component {
  constructor() {
    super();
    // this.state = { counter: 0 };//Am I loosing something by not doing in this way
  }
  counter = 0;
  increment() {
    this.counter++;
    this.setState({});//trigger re-render as new object is set to state
    // this.state.counter++;
    // this.setState(this.state);
  }

  render() {
    return (
      <div>
        <h2>Click button to increment counter</h2>
        <button type="button" onClick={()=>this.increment()}>{this.counter}</button>
      </div>
    );
  }
}
//export default App;

ReactDOM.render(
  <App />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

One of the biggest things you'd lose are lifecycle methods and maintainability. The whole idea behind React's state is to make it easier to keep data in sync both in that component and in any child components being passed data from that state, but for all that to work as intended, you need to update the state using this.setState() and read from it through this.state.

What React does when calling this.setState() (besides updating the state) is go through the necessary lifecycle steps as well. One of the main things it does then is re-render the component (and it's children), but as you said, you can trigger that using this.setState({}) which to some extent is true, but only if you're also okay with losing:

Performance

JavaScript is fast. React is fast. What do you get when you cross fast with fast? I don't know, but it's probably something really fast. Especially if you like using React's PureComponent, which is exactly the same as Component with the difference that PureComponent implements shouldComponentUpdate using shallow state and props comparison, whereas Component doesn't. What this means is that if you don't update anything (state and props both stay the same), the PureComponent won't re-render the component, whereas Component will. If you don't use React's state system, you can't really use PureComponent for better performance, nor can you implement shouldComponentUpdate, since you can't compare your old data with your new data. You'd have to re-implement that performance feature yourself.

Stability

Saying goodbye to React's state system in favor of a hacky solution also means saying goodbye to application stability, and saying hello to more problems down the road than you can count. Let's take the performance problems from the above point, and let's put them to scale. In order for you to have a more performant application, you'd have to either repeat the above for the whole application, or create a generic solution that you could re-use across components. Not to mention the fact that remembering to call this.setState({}) every time you update the data, just to make the component re-render. Forget it once, and your application will start to display inconsistent data, because even though "your state" updated, React's state hasn't. Scale that up, and you've got a problem.

Colleagues that don't want to hurt you

Let's face it. You're probably either new to programming, new to React, or haven't worked in a team, and that's okay, we all start from somewhere. What's really important, though, is not making your team want to hurt you so bad you'd have to pick a new specialty. One that doesn't require fingers and/or eyes. The benefit of using tried and tested frameworks, as well as using them correctly, is that there's less hassle for everybody. Nobody has to create and maintain hacky solutions to already existing use cases. Nobody has to tear their hair out due to inconsistent rendering. Nobody has to lose an eye or break any fingers because somebody thought it'd be a good idea to reinvent the wheel, but this time as a cube.

TL;DR & Final words

1. Don't reinvent the wheel. It already exists, and it's round
2. Work smart, not hard
3. Either use React's built-in state system or Redux/MobX (see 1.)
4. Use this.setState for updating, this.state for reading. Don't directly mutate state, as React won't call any lifecycle methods, resulting in unexpected behavior and bugs

Answer 2

Setting component state on a component instance can lead to buggy component and have an impact on maintability of the component.

Correctness of Component state isn't guaranteed

If you generate clicks faster than this.counter is incremented, the computed counter isn't guaranteed to be correct.

setState guarantees that multiple calls to it are batched together to be applied. For this reason, counter value is guaranteed.

this.setState(prevState => ({counter: prevState.counter + 1}))

No separation of rendering logic from state mutation

Also, in use cases where you have to avoid a render when the component state didn't change, React.Component lifecycle methods like shouldComponentUpdate captures the next state _effectively separating the decision to render from update to state.

Keeping state on the component instance will have you computing the next state, comparing it to the previous one and deciding whether to force a rerender. This can become difficult to maintain if you have more state to manage for the component.