Learn React Hooks

Debouncing changes in our post editor

Now that we have learned about debouncing, we are going to implement it in combination with the Undo Hook in our post editor, as follows:

1. First, we have to install the use-debounce library via npm:

> npm install --save use-debounce

2. In src/post/CreatePost.js, first make sure that you import the useState Hook, if it is not imported already:

import React, { useState, useContext, useEffect } from 'react'

3. Next, import the useDebouncedCallback Hook from the use-debounce library:

import { useDebouncedCallback } from 'use-debounce'

4. Now, before the Undo Hook, define a new State Hook, which we are going to use for the non-debounced value, to update the input field:

 const [ content, setInput ] = useState('') ...