You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/hooks-reference.md
+9-21
Original file line number
Diff line number
Diff line change
@@ -78,7 +78,7 @@ The "+" and "-" buttons use the functional form, because the updated value is ba
78
78
>
79
79
> Another option is `useReducer`, which is more suited for managing state objects that contain multiple sub-values.
80
80
81
-
#### Lazy initialization
81
+
#### Lazy initial state
82
82
83
83
The `initialState` argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:
84
84
@@ -186,21 +186,21 @@ An alternative to [`useState`](#usestate). Accepts a reducer of type `(state, ac
186
186
Here's the counter example from the [`useState`](#usestate) section, rewritten to use a reducer:
187
187
188
188
```js
189
+
constinitialState= {count:0};
190
+
189
191
functionreducer(state, action) {
190
192
switch (action.type) {
191
193
case'increment':
192
194
return {count:state.count+1};
193
195
case'decrement':
194
196
return {count:state.count-1};
195
197
default:
196
-
// A reducer must always return a valid state.
197
-
// Alternatively you can throw an error if an invalid action is dispatched.
@@ -213,7 +213,7 @@ function Counter({initialCount}) {
213
213
214
214
#### Specifying the initial state
215
215
216
-
There’s a few different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way to pass the initial state as a second argument:
216
+
There’s two different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way to pass the initial state as a second argument:
217
217
218
218
```js{3}
219
219
const [state, dispatch] = useReducer(
@@ -224,25 +224,13 @@ There’s a few different ways to initialize `useReducer` state. You may choose
224
224
225
225
>Note
226
226
>
227
-
>React doesn’t use the `state = initialState` argument convention popularized by Redux. The initial value sometimes needs to depend on props and so is specified from the Hook call instead. If you feel strongly about this, you can write `state = initialState` both in the reducer and inside the `useReducer` destructuring assignment, but it's not encouraged.
227
+
>React doesn’t use the `state = initialState` argument convention popularized by Redux. The initial value sometimes needs to depend on props and so is specified from the Hook call instead. If you feel strongly about this, you can call `useReducer(reducer, undefined, reducer)` to emulate the Redux behavior, but it's not encouraged.
228
228
229
229
#### Lazy initialization
230
230
231
-
If calculating the initial state is expensive, you can initialize it lazily. In that case, you can skip the second argument (and pass `undefined`). The third `useReducer` argument is an optional `init` function that you can provide to calculate the initial value once:
232
-
233
-
```js{3-4}
234
-
const [state, dispatch] = useReducer(
235
-
reducer,
236
-
undefined,
237
-
() => ({count: initialCount})
238
-
);
239
-
```
240
-
241
-
#### Lazy initialization with a transform
242
-
243
-
For the most flexibility, you can specify *both* the second `initialArg` and the third `init` function arguments. In that case, the initial state will be set to `init(initialArg)`.
231
+
You can also create the initial state lazily. To do this, you can pass an `init` function as the third argument. The initial state will be set to `init(initialArg)`.
244
232
245
-
This is handy if you want to extract the lazy initialization logic outside your reducer:
233
+
It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:
0 commit comments