----
url: https://18.react.dev/reference/react
----
React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:
* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
***
----
url: https://18.react.dev/learn/queueing-a-series-of-state-updates
----
99
9
10
11
12
13
14
15
16
17
import { useState } from 'react';
export default function Counter() {
const \[number, setNumber] = useState(0);
return (
<>
\
{number}\
\
\
)
}
However, as you might recall from the previous section, [each render’s state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render’s event handler is always `0`, no matter how many times you call `setNumber(1)`:
```
setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);
```
```
import { useState } from 'react';
export default function Counter() {
const [number, setNumber] = useState(0);
return (
<>
{number}
)
}
```
Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter:
1. React queues this function to be processed after all the other code in the event handler has run.
2. During the next render, React goes through the queue and gives you the final updated state.
```
setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);
```
Here’s how React works through these lines of code while executing the event handler:
1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
2. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
3. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that’s what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on:
| queued update | `n` | returns |
| ------------- | --- | ----------- |
| `n => n + 1` | `0` | `0 + 1 = 1` |
| `n => n + 1` | `1` | `1 + 1 = 2` |
| `n => n + 1` | `2` | `2 + 1 = 3` |
React stores `3` as the final result and returns it from `useState`.
This is why clicking “+3” in the above example correctly increments the value by 3.
### What happens if you update state after replacing it[](#what-happens-if-you-update-state-after-replacing-it "Link for What happens if you update state after replacing it ")
What about this event handler? What do you think `number` will be in the next render?
```