Debouncing forms in React with Redux - part one

Hi! Today I want to start a new blog post series. This one will be all about debouncing react forms. Let’s get started!

Basic react form

Before we jump into debouncing and what it means I want to present you a simple react form. It looks like this:

I made this using awesome Tailwind CSS. The code for this form sits mainly in two components - App.js:

classAppextendsComponent{constructor(props){super(props)this.state ={ typedWords:[]}}handleChange=event=>{const{ value }= event.target
    let typedWords =[...this.state.typedWords, value]this.setState({ typedWords })}render(){return(<divclassName="flex flex-col items-center min-h-screen w-full bg-teal-lighter bg-repeat"><divclassName="container md:max-w-sm md:mx-auto"><h1className="block w-full text-center text-grey-darkest mb-6">
            Debounce in React
          </h1><SearchInputhandleChange={this.handleChange}/></div>{this.state.typedWords.map((word, key)=>(<SearchResulttext={word}key={key}/>))}</div>)}}

and SearchInput:

classSearchInputextendsComponent{render(){const{ handleChange }=this.props
    return(<formclassName="mb-4"onChange={handleChange}><divclassName="flex flex-col mb-4 md:w-full"><labelclassName="mb-2 uppercase font-bold text-lg text-grey-darkest"htmlFor="search-input">
            Search input:
          </label><inputclassName="field"name="search"type="text"id="search"/></div></form>)}}

How it works

In my App component I define a handleChange function which then will be used inside SearchInput as a callback. In handleChange, I extract typed character from html input. Then I make a copy of state and insert a new value from SearchInput component.

SearchInput is representing html form so I treat it as a representational component.

You may notice another component - SearchResult which looks like this:

functionSearchResult(props){const{ text }= props
  return(<divclassName="container md:max-w-sm md:mx-auto"><span>{text}</span></div>)}

it is still only representing html.

I have my components working so let’s type something into a search input:

Form without debouncing from Noaal on Vimeo.

Whoa! What is happening here?

onChange event handler fired up every time I typed something into an input. That’s not exactly what I wanted - I want my handler to capture only full typed words. How to do it?

By using debouncing - which I will explain in next blog post! Stay tuned and thanks for reading.