Skip to content

Commit cf62830

Browse files
mmcgahangaearon
authored andcommitted
Change name of setState updater first arg to 'state' (reactjs#1155)
1 parent 5142e33 commit cf62830

File tree

9 files changed

+29
-29
lines changed

9 files changed

+29
-29
lines changed

content/docs/conditional-rendering.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,8 +215,8 @@ class Page extends React.Component {
215215
}
216216
217217
handleToggleClick() {
218-
this.setState(prevState => ({
219-
showWarning: !prevState.showWarning
218+
this.setState(state => ({
219+
showWarning: !state.showWarning
220220
}));
221221
}
222222

content/docs/faq-state.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ Passing an update function allows you to access the current state value inside t
5959

6060
```jsx
6161
incrementCount() {
62-
this.setState((prevState) => {
63-
// Important: read `prevState` instead of `this.state` when updating.
64-
return {count: prevState.count + 1}
62+
this.setState((state) => {
63+
// Important: read `state` instead of `this.state` when updating.
64+
return {count: state.count + 1}
6565
});
6666
}
6767

content/docs/handling-events.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ class Toggle extends React.Component {
7171
}
7272
7373
handleClick() {
74-
this.setState(prevState => ({
75-
isToggleOn: !prevState.isToggleOn
74+
this.setState(state => ({
75+
isToggleOn: !state.isToggleOn
7676
}));
7777
}
7878

content/docs/optimizing-performance.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -339,8 +339,8 @@ The simplest way to avoid this problem is to avoid mutating values that you are
339339

340340
```javascript
341341
handleClick() {
342-
this.setState(prevState => ({
343-
words: prevState.words.concat(['marklar'])
342+
this.setState(state => ({
343+
words: state.words.concat(['marklar'])
344344
}));
345345
}
346346
```
@@ -349,8 +349,8 @@ ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/Java
349349

350350
```js
351351
handleClick() {
352-
this.setState(prevState => ({
353-
words: [...prevState.words, 'marklar'],
352+
this.setState(state => ({
353+
words: [...state.words, 'marklar'],
354354
}));
355355
};
356356
```

content/docs/portals.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@ class Parent extends React.Component {
113113
// This will fire when the button in Child is clicked,
114114
// updating Parent's state, even though button
115115
// is not direct descendant in the DOM.
116-
this.setState(prevState => ({
117-
clicks: prevState.clicks + 1
116+
this.setState(state => ({
117+
clicks: state.clicks + 1
118118
}));
119119
}
120120

content/docs/reference-react-component.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -428,18 +428,18 @@ Think of `setState()` as a *request* rather than an immediate command to update
428428
The first argument is an `updater` function with the signature:
429429

430430
```javascript
431-
(prevState, props) => stateChange
431+
(state, props) => stateChange
432432
```
433433

434-
`prevState` is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `prevState` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`:
434+
`state` is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `state` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`:
435435

436436
```javascript
437-
this.setState((prevState, props) => {
438-
return {counter: prevState.counter + props.step};
437+
this.setState((state, props) => {
438+
return {counter: state.counter + props.step};
439439
});
440440
```
441441

442-
Both `prevState` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `prevState`.
442+
Both `state` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `state`.
443443

444444
The second parameter to `setState()` is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead.
445445

@@ -466,11 +466,11 @@ Object.assign(
466466
)
467467
```
468468

469-
Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the previous state, we recommend using the updater function form, instead:
469+
Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the current state, we recommend using the updater function form, instead:
470470

471471
```js
472-
this.setState((prevState) => {
473-
return {quantity: prevState.quantity + 1};
472+
this.setState((state) => {
473+
return {quantity: state.quantity + 1};
474474
});
475475
```
476476

content/docs/state-and-lifecycle.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -359,18 +359,18 @@ To fix it, use a second form of `setState()` that accepts a function rather than
359359

360360
```js
361361
// Correct
362-
this.setState((prevState, props) => ({
363-
counter: prevState.counter + props.increment
362+
this.setState((state, props) => ({
363+
counter: state.counter + props.increment
364364
}));
365365
```
366366

367367
We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
368368

369369
```js
370370
// Correct
371-
this.setState(function(prevState, props) {
371+
this.setState(function(state, props) {
372372
return {
373-
counter: prevState.counter + props.increment
373+
counter: state.counter + props.increment
374374
};
375375
});
376376
```

content/home/examples/a-stateful-component.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ class Timer extends React.Component {
55
}
66

77
tick() {
8-
this.setState(prevState => ({
9-
seconds: prevState.seconds + 1
8+
this.setState(state => ({
9+
seconds: state.seconds + 1
1010
}));
1111
}
1212

content/home/examples/an-application.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ class TodoApp extends React.Component {
4141
text: this.state.text,
4242
id: Date.now()
4343
};
44-
this.setState(prevState => ({
45-
items: prevState.items.concat(newItem),
44+
this.setState(state => ({
45+
items: state.items.concat(newItem),
4646
text: ''
4747
}));
4848
}

0 commit comments

Comments
 (0)