[["$r","MaxWidth","8",{"children":[["$r","Intro",null,{"children":["$r","p",null,{"children":"Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates."}]}],"\n",["$r","YouWillLearn",null,{"children":["$r","ul",null,{"children":["\n",["$r","li",null,{"children":"What “batching” is and how React uses it to process multiple state updates"}],"\n",["$r","li",null,{"children":"How to apply several updates to the same state variable in a row"}],"\n"]}]}],"\n",["$r","h2",null,{"id":"react-batches-state-updates","children":"React batches state updates "}],"\n",["$r","p",null,{"children":["You might expect that clicking the “+3” button will increment the counter three times because it calls ",["$r","code",null,{"children":"setNumber(number + 1)"}]," three times:"]}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { useState } from 'react';\n\nexport default function Counter() {\n const [number, setNumber] = useState(0);\n\n return (\n <>\n

{number}

\n \n \n )\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","children":"button { display: inline-block; margin: 10px; font-size: 20px; }\nh1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }\n"}]}]]}],["$r","MaxWidth","56",{"children":["\n",["$r","p",null,{"children":["Here, ",["$r","code",null,{"children":"n => n + 1"}]," is called an ",["$r","strong",null,{"children":"updater function."}]," When you pass it to a state setter:"]}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":"React queues this function to be processed after all the other code in the event handler has run."}],"\n",["$r","li",null,{"children":"During the next render, React goes through the queue and gives you the final updated state."}],"\n"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"setNumber(n => n + 1);\nsetNumber(n => n + 1);\nsetNumber(n => n + 1);\n"}]}],"\n",["$r","p",null,{"children":"Here’s how React works through these lines of code while executing the event handler:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(n => n + 1)"}],": ",["$r","code",null,{"children":"n => n + 1"}]," is a function. React adds it to a queue."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(n => n + 1)"}],": ",["$r","code",null,{"children":"n => n + 1"}]," is a function. React adds it to a queue."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(n => n + 1)"}],": ",["$r","code",null,{"children":"n => n + 1"}]," is a function. React adds it to a queue."]}],"\n"]}],"\n",["$r","p",null,{"children":["When you call ",["$r","code",null,{"children":"useState"}]," during the next render, React goes through the queue. The previous ",["$r","code",null,{"children":"number"}]," state was ",["$r","code",null,{"children":"0"}],", so that’s what React passes to the first updater function as the ",["$r","code",null,{"children":"n"}]," argument. Then React takes the return value of your previous updater function and passes it to the next updater as ",["$r","code",null,{"children":"n"}],", and so on:"]}],"\n",["$r","table",null,{"children":[["$r","thead",null,{"children":["$r","tr",null,{"children":[["$r","th",null,{"children":"queued update"}],["$r","th",null,{"children":["$r","code",null,{"children":"n"}]}],["$r","th",null,{"children":"returns"}]]}]}],["$r","tbody",null,{"children":[["$r","tr",null,{"children":[["$r","td",null,{"children":["$r","code",null,{"children":"n => n + 1"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"0"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"0 + 1 = 1"}]}]]}],["$r","tr",null,{"children":[["$r","td",null,{"children":["$r","code",null,{"children":"n => n + 1"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"1"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"1 + 1 = 2"}]}]]}],["$r","tr",null,{"children":[["$r","td",null,{"children":["$r","code",null,{"children":"n => n + 1"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"2"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"2 + 1 = 3"}]}]]}]]}]]}],"\n",["$r","p",null,{"children":["React stores ",["$r","code",null,{"children":"3"}]," as the final result and returns it from ",["$r","code",null,{"children":"useState"}],"."]}],"\n",["$r","p",null,{"children":"This is why clicking “+3” in the above example correctly increments the value by 3."}],"\n",["$r","h3",null,{"id":"what-happens-if-you-update-state-after-replacing-it","children":"What happens if you update state after replacing it "}],"\n",["$r","p",null,{"children":["What about this event handler? What do you think ",["$r","code",null,{"children":"number"}]," will be in the next render?"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"\n \n )\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","children":"button { display: inline-block; margin: 10px; font-size: 20px; }\nh1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }\n"}]}]]}],["$r","MaxWidth","76",{"children":["\n",["$r","p",null,{"children":"Here’s what this event handler tells React to do:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(number + 5)"}],": ",["$r","code",null,{"children":"number"}]," is ",["$r","code",null,{"children":"0"}],", so ",["$r","code",null,{"children":"setNumber(0 + 5)"}],". React adds ",["$r","em",null,{"children":["“replace with ",["$r","code",null,{"children":"5"}],"”"]}]," to its queue."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(n => n + 1)"}],": ",["$r","code",null,{"children":"n => n + 1"}]," is an updater function. React adds ",["$r","em",null,{"children":"that function"}]," to its queue."]}],"\n"]}],"\n",["$r","p",null,{"children":"During the next render, React goes through the state queue:"}],"\n",["$r","table",null,{"children":[["$r","thead",null,{"children":["$r","tr",null,{"children":[["$r","th",null,{"children":"queued update"}],["$r","th",null,{"children":["$r","code",null,{"children":"n"}]}],["$r","th",null,{"children":"returns"}]]}]}],["$r","tbody",null,{"children":[["$r","tr",null,{"children":[["$r","td",null,{"children":["”replace with ",["$r","code",null,{"children":"5"}],"”"]}],["$r","td",null,{"children":[["$r","code",null,{"children":"0"}]," (unused)"]}],["$r","td",null,{"children":["$r","code",null,{"children":"5"}]}]]}],["$r","tr",null,{"children":[["$r","td",null,{"children":["$r","code",null,{"children":"n => n + 1"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"5"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"5 + 1 = 6"}]}]]}]]}]]}],"\n",["$r","p",null,{"children":["React stores ",["$r","code",null,{"children":"6"}]," as the final result and returns it from ",["$r","code",null,{"children":"useState"}],"."]}],"\n",["$r","Note",null,{"children":["$r","p",null,{"children":["You may have noticed that ",["$r","code",null,{"children":"setState(5)"}]," actually works like ",["$r","code",null,{"children":"setState(n => 5)"}],", but ",["$r","code",null,{"children":"n"}]," is unused!"]}]}],"\n",["$r","h3",null,{"id":"what-happens-if-you-replace-state-after-updating-it","children":"What happens if you replace state after updating it "}],"\n",["$r","p",null,{"children":["Let’s try one more example. What do you think ",["$r","code",null,{"children":"number"}]," will be in the next render?"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"\n \n )\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","children":"button { display: inline-block; margin: 10px; font-size: 20px; }\nh1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }\n"}]}]]}],["$r","MaxWidth","104",{"children":["\n",["$r","p",null,{"children":"Here’s how React works through these lines of code while executing this event handler:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(number + 5)"}],": ",["$r","code",null,{"children":"number"}]," is ",["$r","code",null,{"children":"0"}],", so ",["$r","code",null,{"children":"setNumber(0 + 5)"}],". React adds ",["$r","em",null,{"children":["“replace with ",["$r","code",null,{"children":"5"}],"”"]}]," to its queue."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(n => n + 1)"}],": ",["$r","code",null,{"children":"n => n + 1"}]," is an updater function. React adds ",["$r","em",null,{"children":"that function"}]," to its queue."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"setNumber(42)"}],": React adds ",["$r","em",null,{"children":["“replace with ",["$r","code",null,{"children":"42"}],"”"]}]," to its queue."]}],"\n"]}],"\n",["$r","p",null,{"children":"During the next render, React goes through the state queue:"}],"\n",["$r","table",null,{"children":[["$r","thead",null,{"children":["$r","tr",null,{"children":[["$r","th",null,{"children":"queued update"}],["$r","th",null,{"children":["$r","code",null,{"children":"n"}]}],["$r","th",null,{"children":"returns"}]]}]}],["$r","tbody",null,{"children":[["$r","tr",null,{"children":[["$r","td",null,{"children":["”replace with ",["$r","code",null,{"children":"5"}],"”"]}],["$r","td",null,{"children":[["$r","code",null,{"children":"0"}]," (unused)"]}],["$r","td",null,{"children":["$r","code",null,{"children":"5"}]}]]}],["$r","tr",null,{"children":[["$r","td",null,{"children":["$r","code",null,{"children":"n => n + 1"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"5"}]}],["$r","td",null,{"children":["$r","code",null,{"children":"5 + 1 = 6"}]}]]}],["$r","tr",null,{"children":[["$r","td",null,{"children":["”replace with ",["$r","code",null,{"children":"42"}],"”"]}],["$r","td",null,{"children":[["$r","code",null,{"children":"6"}]," (unused)"]}],["$r","td",null,{"children":["$r","code",null,{"children":"42"}]}]]}]]}]]}],"\n",["$r","p",null,{"children":["Then React stores ",["$r","code",null,{"children":"42"}]," as the final result and returns it from ",["$r","code",null,{"children":"useState"}],"."]}],"\n",["$r","p",null,{"children":["To summarize, here’s how you can think of what you’re passing to the ",["$r","code",null,{"children":"setNumber"}]," state setter:"]}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"An updater function"}]," (e.g. ",["$r","code",null,{"children":"n => n + 1"}],") gets added to the queue."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Any other value"}]," (e.g. number ",["$r","code",null,{"children":"5"}],") adds “replace with ",["$r","code",null,{"children":"5"}],"” to the queue, ignoring what’s already queued."]}],"\n"]}],"\n",["$r","p",null,{"children":["After the event handler completes, React will trigger a re-render. During the re-render, React will process the queue. Updater functions run during rendering, so ",["$r","strong",null,{"children":["updater functions must be ",["$r","a",null,{"href":"/learn/keeping-components-pure","children":"pure"}]]}]," and only ",["$r","em",null,{"children":"return"}]," the result. Don’t try to set state from inside of them or run other side effects. In Strict Mode, React will run each updater function twice (but discard the second result) to help you find mistakes."]}],"\n",["$r","h3",null,{"id":"naming-conventions","children":"Naming conventions "}],"\n",["$r","p",null,{"children":"It’s common to name the updater function argument by the first letters of the corresponding state variable:"}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"setEnabled(e => !e);\nsetLastName(ln => ln.reverse());\nsetFriendCount(fc => fc * 2);\n"}]}],"\n",["$r","p",null,{"children":["If you prefer more verbose code, another common convention is to repeat the full state variable name, like ",["$r","code",null,{"children":"setEnabled(enabled => !enabled)"}],", or to use a prefix like ",["$r","code",null,{"children":"setEnabled(prevEnabled => !prevEnabled)"}],"."]}],"\n",["$r","Recap",null,{"children":["$r","ul",null,{"children":["\n",["$r","li",null,{"children":"Setting state does not change the variable in the existing render, but it requests a new render."}],"\n",["$r","li",null,{"children":"React processes state updates after event handlers have finished running. This is called batching."}],"\n",["$r","li",null,{"children":["To update some state multiple times in one event, you can use ",["$r","code",null,{"children":"setNumber(n => n + 1)"}]," updater function."]}],"\n"]}]}],"\n"]}],["$r","Challenges",null,{"children":[["$r","h4",null,{"id":"fix-a-request-counter","children":"Fix a request counter "}],["$r","p",null,{"children":"You’re working on an art marketplace app that lets the user submit multiple orders for an art item at the same time. Each time the user presses the “Buy” button, the “Pending” counter should increase by one. After three seconds, the “Pending” counter should decrease, and the “Completed” counter should increase."}],["$r","p",null,{"children":["However, the “Pending” counter does not behave as intended. When you press “Buy”, it decreases to ",["$r","code",null,{"children":"-1"}]," (which should not be possible!). And if you click fast twice, both counters seem to behave unpredictably."]}],["$r","p",null,{"children":"Why does this happen? Fix both counters."}],["$r","Sandpack",null,{"children":["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { useState } from 'react';\n\nexport default function RequestTracker() {\n const [pending, setPending] = useState(0);\n const [completed, setCompleted] = useState(0);\n\n async function handleClick() {\n setPending(pending + 1);\n await delay(3000);\n setPending(pending - 1);\n setCompleted(completed + 1);\n }\n\n return (\n <>\n

\n Pending: {pending}\n

\n Completed: {completed}\n

\n \n \n );\n}\n\nfunction delay(ms) {\n return new Promise(resolve => {\n setTimeout(resolve, ms);\n });\n}\n"}]}]}],["$r","Solution",null,{"children":[["$r","p",null,{"children":["Inside the ",["$r","code",null,{"children":"handleClick"}]," event handler, the values of ",["$r","code",null,{"children":"pending"}]," and ",["$r","code",null,{"children":"completed"}]," correspond to what they were at the time of the click event. For the first render, ",["$r","code",null,{"children":"pending"}]," was ",["$r","code",null,{"children":"0"}],", so ",["$r","code",null,{"children":"setPending(pending - 1)"}]," becomes ",["$r","code",null,{"children":"setPending(-1)"}],", which is wrong. Since you want to ",["$r","em",null,{"children":"increment"}]," or ",["$r","em",null,{"children":"decrement"}]," the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions:"]}],["$r","Sandpack",null,{"children":["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { useState } from 'react';\n\nexport default function RequestTracker() {\n const [pending, setPending] = useState(0);\n const [completed, setCompleted] = useState(0);\n\n async function handleClick() {\n setPending(p => p + 1);\n await delay(3000);\n setPending(p => p - 1);\n setCompleted(c => c + 1);\n }\n\n return (\n <>\n

\n Pending: {pending}\n

\n Completed: {completed}\n

\n \n \n );\n}\n\nfunction delay(ms) {\n return new Promise(resolve => {\n setTimeout(resolve, ms);\n });\n}\n"}]}]}],["$r","p",null,{"children":["This ensures that when you increment or decrement a counter, you do it in relation to its ",["$r","em",null,{"children":"latest"}]," state rather than what the state was at the time of the click."]}]]}],["$r","h4",null,{"id":"implement-the-state-queue-yourself","children":"Implement the state queue yourself "}],["$r","p",null,{"children":"In this challenge, you will reimplement a tiny part of React from scratch! It’s not as hard as it sounds."}],["$r","p",null,{"children":["Scroll through the sandbox preview. Notice that it shows ",["$r","strong",null,{"children":"four test cases."}]," They correspond to the examples you’ve seen earlier on this page. Your task is to implement the ",["$r","code",null,{"children":"getFinalState"}]," function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass."]}],["$r","p",null,{"children":["You will receive two arguments: ",["$r","code",null,{"children":"baseState"}]," is the initial state (like ",["$r","code",null,{"children":"0"}],"), and the ",["$r","code",null,{"children":"queue"}]," is an array which contains a mix of numbers (like ",["$r","code",null,{"children":"5"}],") and updater functions (like ",["$r","code",null,{"children":"n => n + 1"}],") in the order they were added."]}],["$r","p",null,{"children":"Your task is to return the final state, just like the tables on this page show!"}],["$r","Hint",null,{"children":[["$r","p",null,{"children":"If you’re feeling stuck, start with this code structure:"}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"export function getFinalState(baseState, queue) {\n let finalState = baseState;\n\n for (let update of queue) {\n if (typeof update === 'function') {\n // TODO: apply the updater function\n } else {\n // TODO: replace the state\n }\n }\n\n return finalState;\n}\n"}]}],["$r","p",null,{"children":"Fill out the missing lines!"}]]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/processQueue.js active","children":"export function getFinalState(baseState, queue) {\n let finalState = baseState;\n\n // TODO: do something with the queue...\n\n return finalState;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/App.js","children":"import { getFinalState } from './processQueue.js';\n\nfunction increment(n) {\n return n + 1;\n}\nincrement.toString = () => 'n => n+1';\n\nexport default function App() {\n return (\n <>\n \n

\n \n

\n \n \n );\n}\n\nfunction TestCase({\n baseState,\n queue,\n expected\n}) {\n const actual = getFinalState(baseState, queue);\n return (\n <>\n

Base state: {baseState}

Queue: [{queue.join(', ')}]

Expected result: {expected}

\n Your result: {actual}\n {' '}\n ({actual === expected ?\n 'correct' :\n 'wrong'\n })\n

\n \n );\n}\n"}]}]]}],["$r","Solution",null,{"children":[["$r","p",null,{"children":"This is the exact algorithm described on this page that React uses to calculate the final state:"}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/processQueue.js active","children":"export function getFinalState(baseState, queue) {\n let finalState = baseState;\n\n for (let update of queue) {\n if (typeof update === 'function') {\n // Apply the updater function.\n finalState = update(finalState);\n } else {\n // Replace the next state.\n finalState = update;\n }\n }\n\n return finalState;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/App.js","children":"import { getFinalState } from './processQueue.js';\n\nfunction increment(n) {\n return n + 1;\n}\nincrement.toString = () => 'n => n+1';\n\nexport default function App() {\n return (\n <>\n \n