title: How to use debounce in ReactJS
body: <p>I'm learning ReactJS and stuck with the following problem. I have an input for contact searching and want to handle it in 1000ms after a user stop typing. I use debounce function for this purpose:</p>
  
  <pre><code>import React, { Component}  from 'react';
  import ReactDOM  from 'react-dom';
  import './index.css';
  import {debounce} from 'lodash';
  
  const contacts = [
      {
          id: 1,
          name: 'Darth Vader',
          phoneNumber: '+250966666666',
          image: 'img/darth.gif'
      }, {
          id: 2,
          name: 'Princess Leia',
          phoneNumber: '+250966344466',
          image: 'img/leia.gif'
      }, {
          id: 3,
          name: 'Luke Skywalker',
          phoneNumber: '+250976654433',
          image: 'img/luke.gif'
      }, {
          id: 4,
          name: 'Chewbacca',
          phoneNumber: '+250456784935',
          image: 'img/chewbacca.gif'
      }
  ];
  
  class Contact extends React.Component {
      render() {
          return (
              &lt;li className="contact"&gt;
                  &lt;img className="contact-image" src={this.props.image} width="60px" height="60px"/&gt;
                  &lt;div className="contact-info"&gt;
                      &lt;div className="contact-name"&gt;{this.props.name}&lt;/div&gt;
                      &lt;div className="contact-number"&gt;{this.props.phoneNumber}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          );
      }
  }
  
  class ContactList extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              displayedContacts: contacts,
          };
          this.handleChange = debounce(this.handleChange.bind(this), 1000);
      }
  
      handleChange = e =&gt; {
          e.persist();
          let input = e.target.value.toLowerCase();
          this.setState({
              displayedContacts: contacts.filter(c =&gt; c.name.toLowerCase().includes(input))
          });   
      }
  
      render() {
          return (
              &lt;div className="contacts"&gt;
                  &lt;input type="text" className="search-field" onChange={this.handleChange}/&gt;
                  &lt;ul className="contacts-list"&gt;
                      {
                          this.state.displayedContacts.map(c =&gt;
                              &lt;Contact 
                                  key={c.id} 
                                  name={c.name}
                                  phoneNumber={c.phoneNumber}
                                  image={c.image} /&gt;
                          )
                      }
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(
      &lt;ContactList /&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>In console log after filling in the search input I get a <strong><em>warning</em></strong> "This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property <code>target</code> on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist()" </p>
  
  <p>and an <strong><em>error</em></strong> "Uncaught TypeError: Cannot read property 'value' of null at ContactList._this2.handleChange".</p>
  
  <p>I use <code>persist</code> method in <code>handleChange</code> function. Why I get this error?</p>