Crypto coins exchanger – implementing shouldComponentUpdate

Today, everyone is talking about Bitcoin, Ethereum, Ripple, and other cryptocurrencies. Let's create our own Crypto Coins Exchanger to learn how shouldComponentUpdate works.

Our exchanger will look like this:

1. We'll sell entire coins. That means we won't trade with decimals; everything should be an integer, and each currency costs $10 dollars. Our code is simple, so let's take a look:

import React, { Component } from 'react';
import './Coins.css';

class Coins extends Component {
  constructor() {
    super();

    // Initial state...
    this.state = {
      dollars: 0
    };
  }

  shouldComponentUpdate(props, state) {
    // We only update if the dollars are multiples of 10
    return state.dollars % 10 === 0;
  }

  handleOnChange = e => {
    this.setState({
      dollars: Number(e.target.value || 0)
    });
  }

  render() {
    return (
      <div className="Coins">
        <h1>Buy Crypto Coins!</h1>

        <div className="question">
          <p>How much dollars do you have?</p>

          <p>
            <input 
              placeholder="0" 
              onChange={this.handleOnChange} 
              type="text" 
            />
          </p>
        </div>

        <div className="answer">
          <p>Crypto Coin price: $10</p>
          <p>
            You can buy <strong>{this.state.dollars / 10}</strong> 
            coins.
          </p>
        </div>
      </div>
    );
  }
}

export default Coins;

2. We are updating our dollars state every time the user writes something in the input and converting the value to a number, but if you run this code, you will probably notice that when you put in a number under 10, the message You can buy 0 coins doesn't change until you write 10, 20, 30, 40, and so on.
3. shouldComponentUpdate: This method is one of the most important methods that improve the performance of our application. It receives two parameters (props, state) every time we update a local state, and when a prop is updated this method is executed. The returned value must be boolean, which means that if you intentionally write the following, your component will never update because this method will block it from updating:

shouldComponentUpdate(props, state) {
  return false;
}

4. But, on the other hand, if you return true or even if you don't define this method at all, the default behavior of React is always to update the component, which in some cases can cause a performance issue when we are rendering vast views and handling a lot of data that changes regularly.

5. In our example, we are returning true only when the number of dollars that the user enters is a multiple of 10. That's why you only see the component updating in this case:

6. But it is not going to work for numbers that are not multiples of 10:

7. Now, if we remove the shouldComponentUpdate method from our component or we directly return a true value, the component will update every time we write a number, and this will be the result:

8. As you can see, with shouldComponentUpdate, we can control the updates of our component, and this improves the performance of the application significantly. The last piece of our example is the CSS:

  .Coins {
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    margin-bottom: 20px;
    margin: 50px auto;
    min-height: 20px;
    padding: 19px;
    text-align: left;
    width: 70%;
  }

  .Coins input {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    color: #555;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    padding: 6px 12px;
    width: 120px;
  }