Difference between 'data' and 'state' in Frontend

After using React for months, I have to say it is very different between 'data' and 'state'. However at the first glance, they are the same thing. Now let's talk about this topic.

DATA is a stable structured source type. 'stable' means it will now change unless you request a new data to cover the variable. 'structured' means it is not compatible in different system.

STATE is a fluxible/changeable temporary source type. 'changeable' means it can be changed by current code scope. 'temporary' means when current scope is destroyed it should be destroyed too.

However, we always make a reference from a state to a data. This make the relationship complex.

I think there are several rules for developers to keep in mind:

  1. you should not use state to change its refer data, a data which is referred by a state should only be used for response (render, calculation..), no change
  2. data should be managed in a redux store like manager tool, if you want to request new data, you should dispatch a action to the store and let the store notify the application, and the application subscribe a listener in which can get the new data
  3. change a state means change the view, visual view is based on state, one state, one view, never make it unexpected when using state.

This is what I thought about data and state.