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 ... } }