How to use Debounce in Search in React js?

2 years ago admin Reactjs

In today's lesson, we are going to see how to use debounce in search in React js.

Debounce is like waiting until a user stops typing to fetch search results.


Install the package

First of all, we need to install the package useDebounce.

                                                    
                                                                                                                
npm i use-debounce

Implement debounce in search

Next, let's assume that we have a search component that fetches tasks from API when the user starts typing, and we want to delay getting search results for a few milliseconds.

So here we use useDebounce like the code below:

                                                        
                                                                                                                        
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useDebounce } from 'use-debounce';


export default function Tasks() {
    const [tasks, setTasks] = useState([]);
    const [searchTerm , setSearchTerm] = useState('');
    const debouncedSearchTerm = useDebounce(searchTerm, 300);

    useEffect(() => {
      fetchTasks();
    }, [debouncedSearchTerm[0]])


    const fetchTasks = async () => {
        try {
            if(debouncedSearchTerm[0] !== ''){
              const response = await axios.get(`api/search/${searchTerm}/tasks`);
              setTasks(response.data);
            }
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <div className="row my-5">
            <div className="col-md-12 card">
                <div className="row my-3">
                    <div className="col-md-4">
                        <div className="form-group">
                            <input type="text" 
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                placeholder="Search..." 
                                className="form-control rounded-0 border border-dark" />
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    <table className="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Body</th>
                                <th>Category</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                tasks?.map(task => (
                                    <tr key={task.id}>
                                        <td>{task.id}</td>
                                        <td>{task.title}</td>
                                        <td>{task.body}</td>
                                        <td>{task.category.name}</td>
                                        <td>{task.created_at}</td>
                                    </tr>
                                ))
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}

Related Tuorials

How to Add Bootstrap 5 Icons in React

In this lesson, we will see how to add Bootstrap 5 Icons in React, we'll walk through the steps to a...


How to Add Bootstrap 5 in React

In this lesson, we will see how to add Bootstrap 5 in React, we'll walk through the steps to add Boo...


How to Access Images from the Assets folder in React

In this lesson, we will see how to access images from the assets folder in React. When working...


How to Listen to a Specific Word in React

In this lesson, we will see how to listen to a specific word in React. Sometimes, when working...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 5

In the last part of this tutorial, we will display the cart items, add the ability to increment/decr...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 4

In the fourth part of this tutorial, we will fetch and display all the products on the home page, an...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 3

In the third part of this tutorial, we will start coding the front end, first, we will install the p...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 2

In the second part of this tutorial, we will create the product and payment controllers, and later w...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 1

In this tutorial, we will create a shopping cart using React js Laravel 11 and Stripe payment gatewa...


How to Use Rich Text Editor in React js

In this lesson, we will see how to use rich text editor in React JS, let's assume that we have a com...