Call callback in componentDidUpdate

counter.js

/* src/components/Counter/index.js */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import './index.css';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: this.props.amount
    }
  }

  increaseAmount() {
    this.setState(prevState => (
      {amount: prevState.amount +1})
    )
  }

  decreaseAmount() {
    this.setState(prevState => (
      {amount: prevState.amount -1})
    )
  }

  componentDidUpdate(prevProps, prevState) {
    if(prevState !== this.state) {
      this.props.callBack(this.state.amount);
    }
  }

  render() {
    const {
      amount,
      callBack,
      ...other
    } = this.props;

    const counterClasses = classNames(
      'counter',
    );

    return (
      <div className={counterClasses} {...other}>
        <button aria-label='decrease'  onClick={() => this.decreaseAmount()}>
          -
        </button>
        <input type='text' readOnly value={this.state.amount} aria-label="current amount"/>
        <button aria-label='increase' onClick={() => this.increaseAmount()}>
          +
        </button>
      </div>
    );
  }
}

Counter.propTypes = {
  amount: PropTypes.number,
  callBack: PropTypes.func.isRequired
};

Counter.defaultProps = {
  amount: 0
};

export default Counter;