How to debounce your inputs for super fast react/redux components

bad-input.jsx

import React, {Component, PropTypes} from 'react';

class BadInputComponent extends Component {
    static propTypes = {
       text = PropTypes.string.isRequired, 
       updateText = PropTypes.func.isRequired,
    };
    
    render() {
        return (
            <input onChange={this.handleTextChange} value={this.state.text} />
        );
    }
    
    handleTextChange = (e) => {
        this.props.updateText(e.target.value)
    };
}

export default BadInputComponent;

debounced-inputs.jsx

import React, {Component, PropTypes} from 'react';
import debounce from 'lodash/debounce';

class DebouncedInputComponent extends Component {
    static propTypes = {
       text = PropTypes.string.isRequired, 
       updateText = PropTypes.func.isRequired,
    };
    
    constructor(props) {
        super(props);
        this.state = {
            text: '',
        };
    }
    
    componentDidMount() {
        this.sendTextChange = debounce(this.sendTextChange, 500);
        this.setState({text:this.props.text});
    }
    
    render() {
        return (
            <input onChange={this.handleTextChange} value={this.state.text} />
        );
    }
    
    handleTextChange = (e) => {
        this.setState({text: e.target.value});
        this.sendTextChange(e.target.value.trim())
    };
    
    sendTextChange = (text) => {
        this.props.updateText(text);
    };
}

export default DebouncedInputComponent;