0

I am new to React and a bit struggling with state in React and how and where we need to use it. So far, I found out that "If modifying a piece of data does not visually change the component, that data shouldn’t go into state". So, state is all about re-rendering the UI(I hope I am correct). So, the question I want to ask is Is it true that we use state only for re-rendering the UI only?, nothing else and nothing more?

Dickens
  • 895
  • 3
  • 11
  • 25
  • You first need to know what is React Purpose, it is use for building Single Page Application [link](https://en.wikipedia.org/wiki/Single-page_application). With that in mind changing the UI dynamically with new data is necessary. This is where state comes in. – JEEZSUSCRIZE Oct 03 '19 at 02:36
  • Possible duplicate of [Is it a bad practice to use state in a React component if the data will not change? Should I use a property on the class instead?](https://stackoverflow.com/questions/48261439/is-it-a-bad-practice-to-use-state-in-a-react-component-if-the-data-will-not-chan) – JEEZSUSCRIZE Oct 03 '19 at 02:40

4 Answers4

0

You can use state in your class components. State is like private data of your component that may change by action made by user.

State is immutable. This means you can not change state directly in following way this.state.someVal = "smth". The only way to change state is using this.setState() method.

When you change state value React automatically re-renders your component without refreshing the page. In other words React.js reacts to your changes

Dostonbek Oripjonov
  • 1,508
  • 1
  • 12
  • 28
0

State is an object that is directly tied to rendering the component. The reason why you can't change State directly with say this.state.foo='bar' is that React would have no way of knowing that it needed to re-render the component if you did that. Thus there is a setState method to change the state, which under the hood calls the render function of your component.

Therefore, if you have some data that has nothing to do with rendering the component, you don't want to put it into state, as setting its value will cause unnecessary renders to occur. If you're using class components, you can just put that data on the class directly: this.foo='bar'.

see sharper
  • 11,505
  • 8
  • 46
  • 65
0

Basically yes! Two examples might be: A - holding a list of items (shopping list, or todo items) that are rendered directly to the UI, that are subject to change as the user adds and removes items. B - a value that determines whether or not you want something to show up on your UI, for example, you might have a state value called 'showNavbar' that is either true or false, depending on whether you want the user to see a navigation bar.

I hope that helps make sense of it in a basic way :)

gracie catherine
  • 25
  • 6
-1

We use the state for rendering the UI. Also, I think the State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule. For this, We use the 'setState' method.

setState() is the only legitimate way to update state after the initial state setup

Fausta
  • 72
  • 2