Skip to content

Commit d97cdca

Browse files
committed
tweaks
1 parent f9f0d66 commit d97cdca

File tree

1 file changed

+9
-21
lines changed

1 file changed

+9
-21
lines changed

content/docs/hooks-reference.md

+9-21
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ The "+" and "-" buttons use the functional form, because the updated value is ba
7878
>
7979
> Another option is `useReducer`, which is more suited for managing state objects that contain multiple sub-values.
8080
81-
#### Lazy initialization
81+
#### Lazy initial state
8282
8383
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:
8484
@@ -186,21 +186,21 @@ An alternative to [`useState`](#usestate). Accepts a reducer of type `(state, ac
186186
Here's the counter example from the [`useState`](#usestate) section, rewritten to use a reducer:
187187

188188
```js
189+
const initialState = {count: 0};
190+
189191
function reducer(state, action) {
190192
switch (action.type) {
191193
case 'increment':
192194
return {count: state.count + 1};
193195
case 'decrement':
194196
return {count: state.count - 1};
195197
default:
196-
// A reducer must always return a valid state.
197-
// Alternatively you can throw an error if an invalid action is dispatched.
198-
return state;
198+
throw new Error();
199199
}
200200
}
201201

202202
function Counter({initialCount}) {
203-
const [state, dispatch] = useReducer(reducer, {count: initialCount});
203+
const [state, dispatch] = useReducer(reducer, initialState);
204204
return (
205205
<>
206206
Count: {state.count}
@@ -213,7 +213,7 @@ function Counter({initialCount}) {
213213

214214
#### Specifying the initial state
215215

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:
217217

218218
```js{3}
219219
const [state, dispatch] = useReducer(
@@ -224,25 +224,13 @@ There’s a few different ways to initialize `useReducer` state. You may choose
224224

225225
>Note
226226
>
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.
228228
229229
#### Lazy initialization
230230

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)`.
244232

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:
246234

247235
```js{1-3,11-12,21,26}
248236
function init(initialCount) {

0 commit comments

Comments
 (0)