From cf628304bb431a0680fc58c577f89dd7cac5b269 Mon Sep 17 00:00:00 2001 From: Michael McGahan Date: Wed, 5 Sep 2018 10:26:01 +1200 Subject: [PATCH] Change name of setState updater first arg to 'state' (#1155) --- content/docs/conditional-rendering.md | 4 ++-- content/docs/faq-state.md | 6 +++--- content/docs/handling-events.md | 4 ++-- content/docs/optimizing-performance.md | 8 ++++---- content/docs/portals.md | 4 ++-- content/docs/reference-react-component.md | 16 ++++++++-------- content/docs/state-and-lifecycle.md | 8 ++++---- content/home/examples/a-stateful-component.js | 4 ++-- content/home/examples/an-application.js | 4 ++-- 9 files changed, 29 insertions(+), 29 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 82bfa4ed..f2f9d6ce 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -215,8 +215,8 @@ class Page extends React.Component { } handleToggleClick() { - this.setState(prevState => ({ - showWarning: !prevState.showWarning + this.setState(state => ({ + showWarning: !state.showWarning })); } diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index e92717f2..81b677a7 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -59,9 +59,9 @@ Passing an update function allows you to access the current state value inside t ```jsx incrementCount() { - this.setState((prevState) => { - // Important: read `prevState` instead of `this.state` when updating. - return {count: prevState.count + 1} + this.setState((state) => { + // Important: read `state` instead of `this.state` when updating. + return {count: state.count + 1} }); } diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 90b5aeb8..1f93772c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -71,8 +71,8 @@ class Toggle extends React.Component { } handleClick() { - this.setState(prevState => ({ - isToggleOn: !prevState.isToggleOn + this.setState(state => ({ + isToggleOn: !state.isToggleOn })); } diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index bed72f73..745cae6f 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -339,8 +339,8 @@ The simplest way to avoid this problem is to avoid mutating values that you are ```javascript handleClick() { - this.setState(prevState => ({ - words: prevState.words.concat(['marklar']) + this.setState(state => ({ + words: state.words.concat(['marklar']) })); } ``` @@ -349,8 +349,8 @@ ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/Java ```js handleClick() { - this.setState(prevState => ({ - words: [...prevState.words, 'marklar'], + this.setState(state => ({ + words: [...state.words, 'marklar'], })); }; ``` diff --git a/content/docs/portals.md b/content/docs/portals.md index d4547857..47100769 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -113,8 +113,8 @@ class Parent extends React.Component { // This will fire when the button in Child is clicked, // updating Parent's state, even though button // is not direct descendant in the DOM. - this.setState(prevState => ({ - clicks: prevState.clicks + 1 + this.setState(state => ({ + clicks: state.clicks + 1 })); } diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 3b0c67af..4e251372 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -428,18 +428,18 @@ Think of `setState()` as a *request* rather than an immediate command to update The first argument is an `updater` function with the signature: ```javascript -(prevState, props) => stateChange +(state, props) => stateChange ``` -`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`: +`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`: ```javascript -this.setState((prevState, props) => { - return {counter: prevState.counter + props.step}; +this.setState((state, props) => { + return {counter: state.counter + props.step}; }); ``` -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`. +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`. 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. @@ -466,11 +466,11 @@ Object.assign( ) ``` -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: +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: ```js -this.setState((prevState) => { - return {quantity: prevState.quantity + 1}; +this.setState((state) => { + return {quantity: state.quantity + 1}; }); ``` diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index 804ee2dc..f3f34732 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -359,8 +359,8 @@ To fix it, use a second form of `setState()` that accepts a function rather than ```js // Correct -this.setState((prevState, props) => ({ - counter: prevState.counter + props.increment +this.setState((state, props) => ({ + counter: state.counter + props.increment })); ``` @@ -368,9 +368,9 @@ We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript ```js // Correct -this.setState(function(prevState, props) { +this.setState(function(state, props) { return { - counter: prevState.counter + props.increment + counter: state.counter + props.increment }; }); ``` diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js index 55c9d339..7414fd6e 100644 --- a/content/home/examples/a-stateful-component.js +++ b/content/home/examples/a-stateful-component.js @@ -5,8 +5,8 @@ class Timer extends React.Component { } tick() { - this.setState(prevState => ({ - seconds: prevState.seconds + 1 + this.setState(state => ({ + seconds: state.seconds + 1 })); } diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js index e164c4b0..4fe8988c 100644 --- a/content/home/examples/an-application.js +++ b/content/home/examples/an-application.js @@ -41,8 +41,8 @@ class TodoApp extends React.Component { text: this.state.text, id: Date.now() }; - this.setState(prevState => ({ - items: prevState.items.concat(newItem), + this.setState(state => ({ + items: state.items.concat(newItem), text: '' })); }