setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.
The first argument is an updater function with the signature:
(prevState, props) => nextState
+(prevState, 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 state object based on the input from prevState and props. For instance, suppose we wanted to increment a value in state by props.step:
+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:
this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
});
-Both prevState and props received by the updater function are guaranteed to be up-to-date.
+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.
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.
diff --git a/js/ErrorDecoderComponent.js b/js/ErrorDecoderComponent.js
index c0aafab90f..ad46a7e7e6 100644
--- a/js/ErrorDecoderComponent.js
+++ b/js/ErrorDecoderComponent.js
@@ -9,6 +9,8 @@
/* global React ReactDOM errorMap:true */
'use strict';
+var _jsxFileName = '_js/ErrorDecoderComponent.js';
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -32,7 +34,11 @@ function urlify(str) {
if (i % 2 === 1) {
segments[i] = React.createElement(
'a',
- { key: i, target: '_blank', href: segments[i] },
+ { key: i, target: '_blank', href: segments[i], __source: {
+ fileName: _jsxFileName,
+ lineNumber: 27
+ }
+ },
segments[i]
);
}
@@ -71,22 +77,42 @@ function ErrorResult(props) {
if (!code) {
return React.createElement(
'p',
- null,
+ {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 63
+ }
+ },
'When you encounter an error, you\'ll receive a link to this page for that specific error and we\'ll show you the full error text.'
);
}
return React.createElement(
'div',
- null,
+ {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 68
+ }
+ },
React.createElement(
'p',
- null,
+ {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 69
+ }
+ },
'The full text of the error you just encountered is:'
),
React.createElement(
'code',
- null,
+ {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 70
+ }
+ },
urlify(errorMsg)
)
);
@@ -129,11 +155,20 @@ var ErrorDecoder = function (_React$Component) {
ErrorDecoder.prototype.render = function render() {
return React.createElement(ErrorResult, {
code: this.state.code,
- msg: this.state.errorMsg
+ msg: this.state.errorMsg,
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 100
+ }
});
};
return ErrorDecoder;
}(React.Component);
-ReactDOM.render(React.createElement(ErrorDecoder, null), document.querySelector('.error-decoder-container'));
\ No newline at end of file
+ReactDOM.render(React.createElement(ErrorDecoder, {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 109
+ }
+}), document.querySelector('.error-decoder-container'));
\ No newline at end of file
diff --git a/js/anchor-links.js b/js/anchor-links.js
index c0b84a6785..1b457f8962 100644
--- a/js/anchor-links.js
+++ b/js/anchor-links.js
@@ -1,3 +1,5 @@
+"use strict";
+
// Add anchors to headings client-side, which prevents them from showing up
// in RSS feeds. See https://github.com/facebook/react/issues/4124.
(function () {
diff --git a/js/examples/hello.js b/js/examples/hello.js
index 7372889f07..71b5907b52 100644
--- a/js/examples/hello.js
+++ b/js/examples/hello.js
@@ -1,4 +1,11 @@
+'use strict';
+
+var _jsxFileName = '_js/examples/hello.js';
var name = Math.random() > 0.5 ? 'Jane' : 'John';
var HELLO_COMPONENT = ('\nclass HelloMessage extends React.Component {\n render() {\n return Hello {this.props.name};\n }\n}\n\nReactDOM.render(Input
\n Output
\n TODO
\n \n {this.props.items.map(item => (\n - {item.text}
\n ))}\n
\n );\n }\n}\n\nReactDOM.render(