When a component needs to keep track of information between renderings the component itself can create, update, and use state. We\u2019ll be working with a fairly simple component to see state working in action. We\u2019ve got a button that keeps track of how many times you\u2019ve clicked it.<\/p>\n
Here\u2019s the code:<\/p>\n
class Button extends React.Component {<\/p>\n
constructor() {<\/p>\n
super();<\/p>\n
this.state = {<\/p>\n
count: 0,<\/p>\n
};<\/p>\n
}<\/p>\n
updateCount() {<\/p>\n
this.setState((prevState, props) => {<\/p>\n
return { count: prevState.count + 1 }<\/p>\n
});<\/p>\n
}<\/p>\n
render() {<\/p>\n
return (<button<\/p>\n
onClick={() => this.updateCount()}<\/p>\n
><\/p>\n
Clicked {this.state.count} times<\/p>\n
<\/button>);<\/p>\n
}<\/p>\n
}<\/p>\n
So now we\u2019re working with state things are a bit more complicated. But we\u2019ll break it down to make it more understandable.<\/p>\n
Our first real difference between props and state is, state is created in the component. Let\u2019s look at the constructor method:<\/p>\n
constructor() {<\/p>\n
super();<\/p>\n
this.state = {<\/p>\n
count: 0,<\/p>\n
};<\/p>\n
}<\/p>\n
This is where state gets it\u2019s initial data. The inital data can be hard coded (as above), but it can also come from props. Well that\u2019s just confusing. It is, I know. But it makes sense – you can\u2019t change props, but it\u2019s pretty reasonable to want to do stuff to the data that a component receives. That\u2019s where state comes in. Moving on brings us to our second difference, state is changeable<\/p>\n
Here\u2019s updateCount again:<\/p>\n
updateCount() {<\/p>\n
this.setState((prevState, props) => {<\/p>\n
return { count: prevState.count + 1 }<\/p>\n
});<\/p>\n
}<\/p>\n
<\/p>\n
We change the state to keep track of the total number of clicks. The important bit is setState. First off, notice that setState takes a function, that\u2019s becuase setState can run asynchronously. It needs to take a callback function rather than updating the state directly. You can see we have access to prevState within the callback, this will contain the previous state, even if the state has already been updated somewhere else. Pretty slick, huh?<\/p>\n
But React goes one step better, setState updates the state object and re-renders the component automagically. Yeah, this is pretty great of React to do, no need for us to explicitly re-render or worry about anything. React will take care of it all!<\/p>\n
It is tempting to write this.state.count = this.state.count + 1. Do not do this! React cannot listen to the state getting updated in this way, so your component will not re-render. Always use setState. It might also be tempting to write something like this:<\/p>\n
\/\/ DO NOT USE<\/p>\n
this.setState({<\/p>\n
count: this.state.count + 1<\/p>\n
});<\/p>\n
Although this might look reasonable, doesn\u2019t throw errors, and you might find examples that use this syntax online, it is wrong. This does not take into account the asychronous nature that setState can use and might cause errors with out of sync state data.<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
When a component needs to keep track of information between renderings the component itself can create, update, and use state. We\u2019ll be working with a fairly simple component to see state working in action. We\u2019ve got a button that keeps track of how many times you\u2019ve clicked it. Here\u2019s the code: class Button extends React.Component…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8564],"class_list":["post-73445","page","type-page","status-publish","hentry","category-reactjs","tag-when-to-use-state"],"acf":[],"yoast_head":"\n