{"id":73447,"date":"2020-01-15T18:00:28","date_gmt":"2020-01-15T12:30:28","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=73447"},"modified":"2024-04-12T14:23:13","modified_gmt":"2024-04-12T08:53:13","slug":"setstate","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/setstate\/","title":{"rendered":"Sets"},"content":{"rendered":"

Sets<\/strong><\/h4>\n

setState() schedules an update to a component\u2019s state object. When state changes, the component responds by re-rendering. In React, both this.props and this.state represent the rendered values, i.e. what\u2019s currently on the screen.<\/p>\n

Calls to setState are asynchronous – don\u2019t rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need to compute values based on the current state. Example of code that will not behave as expected:<\/p>\n

incrementCount() {<\/p>\n

\/\/ Note: this will *not* work as intended.<\/p>\n

this.setState({count: this.state.count + 1});<\/p>\n

}<\/p>\n

handleSomething() {<\/p>\n

\/\/ Let’s say `this.state.count` starts at 0.<\/p>\n

this.incrementCount();<\/p>\n

this.incrementCount();<\/p>\n

this.incrementCount();<\/p>\n

\/\/ When React re-renders the component, `this.state.count` will be 1, but you expected 3.<\/p>\n

\/\/ This is because `incrementCount()` function above reads from `this.state.count`,<\/p>\n

\/\/ but React doesn’t update `this.state.count` until the component is re-rendered.<\/p>\n

\/\/ So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1.<\/p>\n

}<\/p>\n

Currently, setState is asynchronous inside event handlers. This ensures, for example, that if both Parent and Child call setState during a click event, Child isn\u2019t re-rendered twice. Instead, React \u201cflushes\u201d the state updates at the end of the browser event. This results in significant performance improvements in larger apps. This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases.<\/p>\n

How do I update state with values that depend on the current state?<\/p>\n

Pass a function instead of an object to setState to ensure the call always uses the most updated version of state.<\/p>\n

What is the difference between passing an object or a function in setState?<\/p>\n

Passing an update function allows you to access the current state value inside the updater. Since setState calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting:<\/p>\n

incrementCount() {<\/p>\n

this.setState((state) => {<\/p>\n

\/\/ Important: read `state` instead of `this.state` when updating.<\/p>\n

return {count: state.count + 1}<\/p>\n

});<\/p>\n

}<\/p>\n

handleSomething() {<\/p>\n

\/\/ Let’s say `this.state.count` starts at 0.<\/p>\n

this.incrementCount();<\/p>\n

this.incrementCount();<\/p>\n

this.incrementCount();<\/p>\n

\/\/ If you read `this.state.count` now, it would still be 0.<\/p>\n

\/\/ But when React re-renders the component, it will be 3.<\/p>\n

}<\/p>\n

Synchronous this.state<\/strong><\/p>\n

React intentionally \u201cwaits\u201d until all components call setState() in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders. However, you might still be wondering why React doesn\u2019t just update this.state immediately without re-rendering.<\/p>\n

There are two main reasons:<\/p>\n