Solution: Performance optimization

exercises/src/index.css

@@ -26,3 +26,58 @@ body {
   flex: 3;
   flex-direction: column;
 }
+
+.Counter {
+  background-color: rgb(255, 255, 255);
+  list-style: none;
+  -webkit-padding-start: 0px;
+}
+.Counter__button {
+  display: inline-block;
+  -webkit-appearance: button;
+  user-select: none;
+  outline: 0px;
+  border-width: 0px;
+  border-style: initial;
+  border-color: initial;
+  border-image: initial;
+  border-radius: 4px;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  width: 100%;
+  font-size: 18px;
+  padding: 14px 12px;
+  background-color: rgb(246, 104, 38);
+  color: white;
+  font-weight: 600;
+}
+
+.Counter__button:active {
+  opacity: 0.8;
+}
+
+.Counter__item {
+  height: 56px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: center;
+  position: relative;
+  border-bottom: 1px solid rgb(234, 234, 234);
+}
+
+.Counter__actions {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+}
+
+.Counter__count {
+  width: 50px;
+  text-align: center;
+}
+
+.Counter__disabled {
+  opacity: 0.3;
+}

exercises/src/performance-optimizations/Count.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import subtractIcon from "./icons/subtract.svg";
+import addIcon from "./icons/add.svg";
+
+export default class Count extends Component {
+  static propTypes = {
+    onIncrement: PropTypes.func,
+    onDecrement: PropTypes.func,
+    value: PropTypes.number,
+  }
+  constructor(props) {
+    super(props);
+    this.getClassNamesForButton(props);
+  }
+  getClassNamesForButton = (props) => {
+    const { value } = props;
+    this.addClassName = value >= 10 ? "Counter__disabled" : "";
+    this.subtractClassName = value <= 0 ? "Counter__disabled" : "";
+  }
+  componentWillReceiveProps(nextProps) {
+    this.getClassNamesForButton(nextProps);
+  }
+  render() {
+    const { onDecrement, value, onIncrement } = this.props;
+    return (
+      <ul className="Counter">
+        <li className="Counter__item">
+          <div className="Counter__actions">
+            <span onClick={ onDecrement } className={ this.subtractClassName }>
+              <img src={ subtractIcon } />
+            </span>
+            <p className="Counter__count">{ value }</p>
+            <span onClick={ onIncrement } className={ this.addClassName }>
+              <img src={ addIcon } />
+            </span>
+          </div>
+        </li>
+      </ul>
+    );
+  }
+}

exercises/src/performance-optimizations/Counter.js

@@ -1,10 +1,8 @@
 import React, { Component, Fragment } from "react";
+import Count from "./Count";
 import superExpensiveFunction from "./utils/superExpensiveFunction";
 
 class Counter extends Component {
-  static buttonStyle = {
-    padding: "5px"
-  };
   state = {
     count: 0,
     timestamp: Date.now()
@@ -14,8 +12,20 @@ class Counter extends Component {
     count: prevState.count + 1
   });
 
-  handleCounterClick = () => {
-    this.setState(this.increment);
+  decrement = prevState => ({
+    count: prevState.count - 1
+  });
+
+  handleIncrementClick = () => {
+    if (this.state.count < 10) {
+      this.setState(this.increment);
+    }
+  };
+
+  handleDecrementClick = () => {
+    if(this.state.count > 0) {
+      this.setState(this.decrement);
+    }
   };
 
   handleDummyOperationClick = () => {
@@ -24,22 +34,21 @@ class Counter extends Component {
     });
   };
 
-  shouldComponentUpdate(nextProps, nextState) {
-    // Implement shouldComponentUpdate to avoid unnecessary re-renders.
-  }
+  // Implement shouldComponentUpdate to avoid unnecessary re-renders.
+  // shouldComponentUpdate(nextProps, nextState) {
+  // }
 
   render() {
     const { count } = this.state;
     const calculatedCount = superExpensiveFunction(count);
     return (
       <Fragment>
-        <div>Clicks: {calculatedCount}</div>
-        <div style={Counter.buttonStyle}>
-          <button onClick={this.handleCounterClick}>Increment</button>
-        </div>
-        <div style={Counter.buttonStyle}>
-          <button onClick={this.handleDummyOperationClick}>Dummy</button>
-        </div>
+        <Count
+          onIncrement={ this.handleIncrementClick }
+          onDecrement={ this.handleDecrementClick }
+          value={ calculatedCount }
+        />
+        <button className="Counter__button" onClick={this.handleDummyOperationClick}>Dummy</button>
       </Fragment>
     );
   }

exercises/src/performance-optimizations/index.js

@@ -3,14 +3,15 @@ import Counter from "./Counter";
 
 const styles = {
   fontFamily: "sans-serif",
-  textAlign: "center"
+  textAlign: "center",
+  padding: "40px 120px 0"
 };
 
-const App = () => (
+const PerformanceOptimizationExample = () => (
   <div style={styles}>
-    <p>Implement shouldComponentUpdate in Counter to avoid unnecessary re-renders.</p>
+    <b>Implement shouldComponentUpdate in Counter & Count components to avoid unnecessary re-renders.</b>
     <Counter />
   </div>
 );
 
-export default App
+export default PerformanceOptimizationExample;

solutions/src/performance-optimizations/Count.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import subtractIcon from "./icons/subtract.svg";
+import addIcon from "./icons/add.svg";
+
+export default class Count extends Component {
+  static propTypes = {
+    onIncrement: PropTypes.func,
+    onDecrement: PropTypes.func,
+    value: PropTypes.number,
+  }
+  constructor(props) {
+    super(props);
+    this.getClassNamesForButton(props);
+  }
+  getClassNamesForButton = (props) => {
+    const { value } = props;
+    this.addClassName = value >= 10 ? "Counter__disabled" : "";
+    this.subtractClassName = value <= 0 ? "Counter__disabled" : "";
+  }
+  componentWillReceiveProps(nextProps) {
+    this.getClassNamesForButton(nextProps);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+     return this.props.value !== nextProps.value;
+  }
+  render() {
+    const { onDecrement, value, onIncrement } = this.props;
+    return (
+      <ul className="Counter">
+        <li className="Counter__item">
+          <div className="Counter__actions">
+            <span onClick={ onDecrement } className={ this.subtractClassName }>
+              <img src={ subtractIcon } />
+            </span>
+            <p className="Counter__count">{ value }</p>
+            <span onClick={ onIncrement } className={ this.addClassName }>
+              <img src={ addIcon } />
+            </span>
+          </div>
+        </li>
+      </ul>
+    );
+  }
+}

solutions/src/performance-optimizations/Counter.js

@@ -0,0 +1,58 @@
+import React, { Component, Fragment } from "react";
+import Count from "./Count";
+import superExpensiveFunction from "./utils/superExpensiveFunction";
+
+class Counter extends Component {
+  state = {
+    count: 0,
+    timestamp: Date.now()
+  };
+
+  increment = prevState => ({
+    count: prevState.count + 1
+  });
+
+  decrement = prevState => ({
+    count: prevState.count - 1
+  });
+
+  handleIncrementClick = () => {
+    if (this.state.count < 10) {
+      this.setState(this.increment);
+    }
+  };
+
+  handleDecrementClick = () => {
+    if(this.state.count > 0) {
+      this.setState(this.decrement);
+    }
+  };
+
+  handleDummyOperationClick = () => {
+    this.setState({
+      timestamp: Date.now()
+    });
+  };
+
+  // Implement shouldComponentUpdate to avoid unnecessary re-renders.
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.count !== nextState.count;
+ }
+
+  render() {
+    const { count } = this.state;
+    const calculatedCount = superExpensiveFunction(count);
+    return (
+      <Fragment>
+        <Count
+          onIncrement={ this.handleIncrementClick }
+          onDecrement={ this.handleDecrementClick }
+          value={ calculatedCount }
+        />
+        <button className="Counter__button" onClick={this.handleDummyOperationClick}>Dummy</button>
+      </Fragment>
+    );
+  }
+}
+
+export default Counter;

solutions/src/performance-optimizations/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Counter from "./Counter";
+
+const styles = {
+  fontFamily: "sans-serif",
+  textAlign: "center",
+  padding: "40px 120px 0"
+};
+
+const PerformanceOptimizationExample = () => (
+  <div style={styles}>
+    <b>Implement shouldComponentUpdate in Counter & Count components to avoid unnecessary re-renders.</b>
+    <Counter />
+  </div>
+);
+
+export default PerformanceOptimizationExample;

solutions/src/performance-optimizations/utils/superExpensiveFunction.js

@@ -0,0 +1,6 @@
+const superExpensiveFunction = input => {
+  console.log("superExpensiveFunction");
+  return input;
+};
+
+export default superExpensiveFunction;