diff --git a/examples/16-3-release-blog-create-ref.js b/examples/16-3-release-blog-create-ref.js
index f189e0d0667..77cbb40a70d 100644
--- a/examples/16-3-release-blog-create-ref.js
+++ b/examples/16-3-release-blog-create-ref.js
@@ -3,13 +3,8 @@ class MyComponent extends React.Component {
divRef = React.createRef();
render() {
- // highlight-range{4}
- return (
-
- );
+ // highlight-next-line
+ return ;
}
componentDidMount() {
diff --git a/examples/update-on-async-rendering/adding-event-listeners-after.js b/examples/update-on-async-rendering/adding-event-listeners-after.js
index dbff8e0e049..c3586fcaf4d 100644
--- a/examples/update-on-async-rendering/adding-event-listeners-after.js
+++ b/examples/update-on-async-rendering/adding-event-listeners-after.js
@@ -1,12 +1,11 @@
// After
class ExampleComponent extends React.Component {
- // highlight-range{1-4}
+ // highlight-range{1-3}
state = {
- subscribedValue: this.props
- .dataSource.value,
+ subscribedValue: this.props.dataSource.value,
};
- // highlight-range{1-19}
+ // highlight-range{1-18}
componentDidMount() {
// Event listeners are only safe to add after mount,
// So they won't leak if mount is interrupted or errors.
@@ -21,8 +20,7 @@ class ExampleComponent extends React.Component {
this.props.dataSource.value
) {
this.setState({
- subscribedValue: this.props
- .dataSource.value,
+ subscribedValue: this.props.dataSource.value,
});
}
}
diff --git a/examples/update-on-async-rendering/adding-event-listeners-before.js b/examples/update-on-async-rendering/adding-event-listeners-before.js
index 9f931de22ed..9c383d78a3c 100644
--- a/examples/update-on-async-rendering/adding-event-listeners-before.js
+++ b/examples/update-on-async-rendering/adding-event-listeners-before.js
@@ -1,10 +1,9 @@
// Before
class ExampleComponent extends React.Component {
- // highlight-range{1-11}
+ // highlight-range{1-10}
componentWillMount() {
this.setState({
- subscribedValue: this.props
- .dataSource.value,
+ subscribedValue: this.props.dataSource.value,
});
// This is not safe; it can leak!
diff --git a/examples/update-on-async-rendering/fetching-external-data-after.js b/examples/update-on-async-rendering/fetching-external-data-after.js
index dc237168e9b..efbdf67174d 100644
--- a/examples/update-on-async-rendering/fetching-external-data-after.js
+++ b/examples/update-on-async-rendering/fetching-external-data-after.js
@@ -7,11 +7,9 @@ class ExampleComponent extends React.Component {
externalData: null,
};
- // highlight-range{1-9}
+ // highlight-range{1-7}
componentDidMount() {
- asyncLoadData(
- this.props.someId
- ).then(externalData => {
+ asyncLoadData(this.props.someId).then(externalData => {
if (!this._hasUnmounted) {
this.setState({externalData});
}
diff --git a/examples/update-on-async-rendering/fetching-external-data-before.js b/examples/update-on-async-rendering/fetching-external-data-before.js
index bd8c430a624..c7d4e02582b 100644
--- a/examples/update-on-async-rendering/fetching-external-data-before.js
+++ b/examples/update-on-async-rendering/fetching-external-data-before.js
@@ -4,11 +4,9 @@ class ExampleComponent extends React.Component {
externalData: null,
};
- // highlight-range{1-7}
+ // highlight-range{1-5}
componentWillMount() {
- asyncLoadData(
- this.props.someId
- ).then(externalData =>
+ asyncLoadData(this.props.someId).then(externalData =>
this.setState({externalData})
);
}
diff --git a/examples/update-on-async-rendering/initializing-state-after.js b/examples/update-on-async-rendering/initializing-state-after.js
index 5ccb3a6cc61..077afc88556 100644
--- a/examples/update-on-async-rendering/initializing-state-after.js
+++ b/examples/update-on-async-rendering/initializing-state-after.js
@@ -1,9 +1,8 @@
// After
class ExampleComponent extends React.Component {
- // highlight-range{1-5}
+ // highlight-range{1-4}
state = {
- currentColor: this.props
- .defaultColor,
+ currentColor: this.props.defaultColor,
palette: 'rgb',
};
}
diff --git a/examples/update-on-async-rendering/initializing-state-before.js b/examples/update-on-async-rendering/initializing-state-before.js
index 9f5aa715343..5486bf84942 100644
--- a/examples/update-on-async-rendering/initializing-state-before.js
+++ b/examples/update-on-async-rendering/initializing-state-before.js
@@ -2,11 +2,10 @@
class ExampleComponent extends React.Component {
state = {};
- // highlight-range{1-7}
+ // highlight-range{1-6}
componentWillMount() {
this.setState({
- currentColor: this.props
- .defaultColor,
+ currentColor: this.props.defaultColor,
palette: 'rgb',
});
}
diff --git a/examples/update-on-async-rendering/invoking-external-callbacks-after.js b/examples/update-on-async-rendering/invoking-external-callbacks-after.js
index 57a3ad5de02..8fa605ffa9b 100644
--- a/examples/update-on-async-rendering/invoking-external-callbacks-after.js
+++ b/examples/update-on-async-rendering/invoking-external-callbacks-after.js
@@ -1,18 +1,12 @@
// After
class ExampleComponent extends React.Component {
- // highlight-next-line
- componentDidUpdate(
- prevProps,
- prevState
- ) {
- // highlight-range{1-8}
+ // highlight-range{1-8}
+ componentDidUpdate(prevProps, prevState) {
if (
this.state.someStatefulValue !==
prevState.someStatefulValue
) {
- this.props.onChange(
- this.state.someStatefulValue
- );
+ this.props.onChange(this.state.someStatefulValue);
}
}
}
diff --git a/examples/update-on-async-rendering/invoking-external-callbacks-before.js b/examples/update-on-async-rendering/invoking-external-callbacks-before.js
index 3fbc002c0b2..56fd7a460ae 100644
--- a/examples/update-on-async-rendering/invoking-external-callbacks-before.js
+++ b/examples/update-on-async-rendering/invoking-external-callbacks-before.js
@@ -1,18 +1,12 @@
// Before
class ExampleComponent extends React.Component {
- // highlight-next-line
- componentWillUpdate(
- nextProps,
- nextState
- ) {
- // highlight-range{1-8}
+ // highlight-range{1-8}
+ componentWillUpdate(nextProps, nextState) {
if (
this.state.someStatefulValue !==
nextState.someStatefulValue
) {
- nextProps.onChange(
- nextState.someStatefulValue
- );
+ nextProps.onChange(nextState.someStatefulValue);
}
}
}
diff --git a/examples/update-on-async-rendering/side-effects-in-constructor.js b/examples/update-on-async-rendering/side-effects-in-constructor.js
index 004887c6517..f0686a4bb50 100644
--- a/examples/update-on-async-rendering/side-effects-in-constructor.js
+++ b/examples/update-on-async-rendering/side-effects-in-constructor.js
@@ -2,8 +2,6 @@ class TopLevelRoute extends React.Component {
constructor(props) {
super(props);
- SharedApplicationState.recordEvent(
- 'ExampleComponent'
- );
+ SharedApplicationState.recordEvent('ExampleComponent');
}
}
diff --git a/examples/update-on-async-rendering/updating-state-from-props-after.js b/examples/update-on-async-rendering/updating-state-from-props-after.js
index d155996178e..7e55ff98861 100644
--- a/examples/update-on-async-rendering/updating-state-from-props-after.js
+++ b/examples/update-on-async-rendering/updating-state-from-props-after.js
@@ -5,21 +5,13 @@ class ExampleComponent extends React.Component {
// highlight-next-line
state = {};
- // highlight-next-line
- static getDerivedStateFromProps(
- nextProps,
- prevState
- ) {
- // highlight-range{1-11}
- if (
- nextProps.currentRow !==
- prevState.lastRow
- ) {
+ // highlight-range{1-8}
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if (nextProps.currentRow !== prevState.lastRow) {
return {
lastRow: nextProps.currentRow,
isScrollingDown:
- nextProps.currentRow >
- prevState.lastRow,
+ nextProps.currentRow > prevState.lastRow,
};
}
diff --git a/examples/update-on-async-rendering/updating-state-from-props-before.js b/examples/update-on-async-rendering/updating-state-from-props-before.js
index 0e75ef38318..03dc23cf908 100644
--- a/examples/update-on-async-rendering/updating-state-from-props-before.js
+++ b/examples/update-on-async-rendering/updating-state-from-props-before.js
@@ -4,16 +4,12 @@ class ExampleComponent extends React.Component {
isScrollingDown: false,
};
- // highlight-range{1-12}
+ // highlight-range{1-8}
componentWillReceiveProps(nextProps) {
- if (
- this.props.currentRow !==
- nextProps.currentRow
- ) {
+ if (this.props.currentRow !== nextProps.currentRow) {
this.setState({
isScrollingDown:
- nextProps.currentRow >
- this.props.currentRow,
+ nextProps.currentRow > this.props.currentRow,
});
}
}
diff --git a/examples/update-on-async-rendering/using-react-lifecycles-compat.js b/examples/update-on-async-rendering/using-react-lifecycles-compat.js
index 0913181b5df..925f64acb18 100644
--- a/examples/update-on-async-rendering/using-react-lifecycles-compat.js
+++ b/examples/update-on-async-rendering/using-react-lifecycles-compat.js
@@ -4,10 +4,7 @@ import polyfill from 'react-lifecycles-compat';
class ExampleComponent extends React.Component {
// highlight-next-line
- static getDerivedStateFromProps(
- nextProps,
- prevState
- ) {
+ static getDerivedStateFromProps(nextProps, prevState) {
// Your state update logic here ...
}
}