Component.jsx

import React, { Component } from 'react';

type Props = {
  value: ?string,
  onChange: ?() => {},
  onStopTyping: ?() => void,
  onStartTyping: ?() => void,
};

type State = {
  isTyping: boolean,
};

export default class ChatInput extends Component {
  props: Props;
  
  static defaultProps = {
    value: '',
    onChange: () => {},
    onStopTyping: () => {},
    onStartTyping: () => {},
  };

  state: State = {
    isTyping: false,
  };

  componentDidUpdate(props, { isTyping: wasTyping }) {
    if (wasTyping !== this.state.isTyping) {
      this.state.isTyping ? this.props.onStartTyping() : this.props.onStopTyping();
    }
  }

  timerId = null;

  wait(ms: number) {
    return new Promise(resolve => {
      this.timerId = setTimeout(resolve, ms);
    }).finally(() => {
      this.timerId = clearTimeout(this.timerId);
    });
  }

  onKeyDown = e => {
    clearTimeout(this.timerId);
    this.setState({ isTyping: true });
  };

  onKeyUp = async e => {
    await this.wait(3000);
    this.setState({ isTyping: false });
  };

  render() {
    const { value } = this.props;
    return (
      <div>
        <Input
          value={value}
          onKeyUp={this.onKeyUp}
          onKeyDown={this.onKeyDown}
          onChange={({ target: { value } }) => onChange(value)}
        />
      </div>
    );
  }
}