debounce-react-component.jsx

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

// Create fake projects instead of using a database
let fakeProjects = [];
for (let i = 0; i < 1000000000; i++) {
  fakeProjects.push({
    id: id,
    name: `project ${i}`,
    featured: i % 2 === 0,
    rank: Math.ceil(Math.random() * i),
  });
}

mockApi = () => {
  // 2. Cost here of iterating and also a database delay in real apps
  return fakeProjects
    .filter(project => project.featured)
    .filter(project => project.name.includes(value))
    .sort((a, b) => a.rank - b.rank);
}

const Projects extends Component {
  state = {
    projects: fakeProjects,
  }
  
  handleFilter = debounce((e) => {
    const value = e.target.value;

    // 1. Network delay in a real-world context
    const displayedProjects = mockApi();

    this.setState({ projects: displayedProjects });
  }, 500)
  
  render() {
    // 3. Cost of a React reconciliation as well as updating the DOM
    return (
      <div>
        <input onKeyUp={this.handleFilter.bind(this)}/>
        <ul>
          {
            this.props.projects.map((project) => {
              return (
                <li key={project.id}>
                  {project.name}
                </li>
              );
            }) 
          }
        </ul>
      </div>
    );
  }
}

export default Projects;