Increased Prettier line-width for examples

examples/16-3-release-blog-create-ref.js

@@ -3,13 +3,8 @@ class MyComponent extends React.Component {
   divRef = React.createRef();
 
   render() {
-    // highlight-range{4}
+    // highlight-next-line
-    return (
+    return <input type="text" ref={this.divRef} />;
-      <input
-        type="text"
-        ref={this.divRef}
-      />
-    );
   }
 
   componentDidMount() {

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
+    subscribedValue: this.props.dataSource.value,
-      .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
+        subscribedValue: this.props.dataSource.value,
-          .dataSource.value,
       });
     }
   }

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
+      subscribedValue: this.props.dataSource.value,
-        .dataSource.value,
     });
 
     // This is not safe; it can leak!

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(
+    asyncLoadData(this.props.someId).then(externalData => {
-      this.props.someId
-    ).then(externalData => {
       if (!this._hasUnmounted) {
         this.setState({externalData});
       }

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(
+    asyncLoadData(this.props.someId).then(externalData =>
-      this.props.someId
-    ).then(externalData =>
       this.setState({externalData})
     );
   }

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
+    currentColor: this.props.defaultColor,
-      .defaultColor,
     palette: 'rgb',
   };
 }

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
+      currentColor: this.props.defaultColor,
-        .defaultColor,
       palette: 'rgb',
     });
   }

examples/update-on-async-rendering/invoking-external-callbacks-after.js

@@ -1,18 +1,12 @@
 // After
 class ExampleComponent extends React.Component {
-  // highlight-next-line
+  // highlight-range{1-8}
-  componentDidUpdate(
+  componentDidUpdate(prevProps, prevState) {
-    prevProps,
-    prevState
-  ) {
-    // highlight-range{1-8}
     if (
       this.state.someStatefulValue !==
       prevState.someStatefulValue
     ) {
-      this.props.onChange(
+      this.props.onChange(this.state.someStatefulValue);
-        this.state.someStatefulValue
-      );
     }
   }
 }

examples/update-on-async-rendering/invoking-external-callbacks-before.js

@@ -1,18 +1,12 @@
 // Before
 class ExampleComponent extends React.Component {
-  // highlight-next-line
+  // highlight-range{1-8}
-  componentWillUpdate(
+  componentWillUpdate(nextProps, nextState) {
-    nextProps,
-    nextState
-  ) {
-    // highlight-range{1-8}
     if (
       this.state.someStatefulValue !==
       nextState.someStatefulValue
     ) {
-      nextProps.onChange(
+      nextProps.onChange(nextState.someStatefulValue);
-        nextState.someStatefulValue
-      );
     }
   }
 }

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(
+    SharedApplicationState.recordEvent('ExampleComponent');
-      'ExampleComponent'
-    );
   }
 }

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
+  // highlight-range{1-8}
-  static getDerivedStateFromProps(
+  static getDerivedStateFromProps(nextProps, prevState) {
-    nextProps,
+    if (nextProps.currentRow !== prevState.lastRow) {
-    prevState
-  ) {
-    // highlight-range{1-11}
-    if (
-      nextProps.currentRow !==
-      prevState.lastRow
-    ) {
       return {
         lastRow: nextProps.currentRow,
         isScrollingDown:
-          nextProps.currentRow >
+          nextProps.currentRow > prevState.lastRow,
-          prevState.lastRow,
       };
     }
 

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 (
+    if (this.props.currentRow !== nextProps.currentRow) {
-      this.props.currentRow !==
-      nextProps.currentRow
-    ) {
       this.setState({
         isScrollingDown:
-          nextProps.currentRow >
+          nextProps.currentRow > this.props.currentRow,
-          this.props.currentRow,
       });
     }
   }

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(
+  static getDerivedStateFromProps(nextProps, prevState) {
-    nextProps,
-    prevState
-  ) {
     // Your state update logic here ...
   }
 }