{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/when-and-how-to-use-functional-state-updates-in-react/", "result": {"data":{"markdownRemark":{"html":"

We all understand how useState works.

\n

Below, when we click on the Add button, the counter increases by 1. Simple.

\n
import React, { useState } from "react"\n\nconst App = () => {\n  const [counter, setCounter] = useState(0)\n\n  const handleAddClick = () => {\n    setCounter(counter + 1)\n  }\n\n  return (\n    <div className="m-5">\n      <h1>{counter}</h1>\n      <button className="btn btn-primary" onClick={handleAddClick}>\n        Add\n      </button>\n    </div>\n  )\n}\n\nexport default App
\n

Now, add the highlighted code snippet.

\n
import React, { useState } from "react"\n\nconst App = () => {\n  const [counter, setCounter] = useState(0)\n\n  const handleAddClick = () => {\n    setCounter(counter + 1)\n    setCounter(counter + 1)\n  }\n\n  return (\n    <div className="m-5">\n      <h1>{counter}</h1>\n      <button className="btn btn-primary" onClick={handleAddClick}>\n        Add 1\n      </button>\n    </div>\n  )\n}\n\nexport default App
\n

Notice that we are calling the setCounter function twice.

\n

Now, if I click on the Add button once, how much will the counter increase by?

\n

1 or 2?

\n

The answer is 1.

\n

This is because state updates in React are asynchronous and React batches several state updates in order to make the application more responsive and reduce the amount of work the browser has to do.

\n

The initial state of the counter is 0. The first setCounter call adds 1 to the value of the counter, but the update does not happen immediately as state updates are asynchronous in nature. Then, when we call setCounter for the second time, the counter is still at 0 because the component has not re-rendered yet. Therefore, the second setCounter call also updates the counter variable from 0 to 1.

\n

So, how can we ensure that a single click on the Add button adds 2 to the value of the counter variable?

\n

We can achieve this by passing a function to setCounter, the state update function, as shown below:

\n
setCounter(prevState => prevState + 1)
\n

The function definition inside setCounter takes the previous value of the state as an argument and returns the new state, which is the value of the previous state plus 1.

\n

Fix the code as shown below.

\n

Now, if you click the Add button once, the counter increases by 2.

\n
import React, { useState } from "react"\n\nconst App = () => {\n  const [counter, setCounter] = useState(0)\n\n  const handleAddClick = () => {\n    setCounter(prevState => prevState + 1)\n    setCounter(prevState => prevState + 1)\n  }\n\n  return (\n    <div className="m-5">\n      <h1>{counter}</h1>\n      <button className="btn btn-primary" onClick={handleAddClick}>\n        Add\n      </button>\n    </div>\n  )\n}\n\nexport default App
\n

So, whenever the new state is computed using the previous state, you should use functional state updates in order to guarantee consistency and prevent unexpected bugs.

\n","frontmatter":{"title":"When & How to Use Functional State Updates in React?","date":"2021-07-03"}}},"pageContext":{"slug":"/when-and-how-to-use-functional-state-updates-in-react/","prev":{"fields":{"slug":"/object-and-array-equality-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/javascript-object-methods/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}