DEV Community

How to Create a Search Bar in React

Francisco Mendes on August 08, 2021

One of the things I was currently interested in was creating a search bar, however I didn't want to search for things that were already available i...

Read full post

Gaël • Apr 27 '23 • Edited

Thank you for this interesting article!

I found a way to do the same thing but without useEffect() and in a more optimized way because there is no re-rendering needed each time a key is pressed:

export function SearchBar() {
    let timeoutID = -1;

    function handleChange(e) {
        const searchText = e.target.value;
        clearTimeout(timeoutID);
        timeoutID = setTimeout(() => {
            // Do the fetch and update state here.
        }, 700);
    }

    return <input [...] onChange={handleChange} />;
}

This approach also follows the official website's advice to only use the useEffect hook if there is no other way (react.dev/learn/you-might-not-need...).

Emi Castellano • Aug 9 '21

Great article, I would recommend using debounce instead of setTimeout 🙌

Joel Azevedo • Aug 22 '21

Came here to say the exact same thing.

Francisco Mendes • Aug 23 '21

Thanks Joel! 👊

Francisco Mendes • Aug 9 '21

Thank you! I have to try it! 🤓

Karl Keller • Aug 8 '21

I just love the banner photo btw 👌🏼

Francisco Mendes • Aug 8 '21

I love it too 😭

Marke'l Spellman • Aug 9 '21 • Edited

For some reason this helped me wrap my head around custom hooks. Thanks 💯

Francisco Mendes • Aug 9 '21

I am immensely happy to know! ☺️

Nigel Lowa • Aug 12 '21

Hey, it doesn't work on Chrome mobile browser

Francisco Mendes • Aug 12 '21

Does not work? And on the desktop? 🧐

Nigel Lowa • Aug 12 '21

It works on the desktop just fine. Sorry, I was in a hurry so couldn't explain myself better earlier. The API only accepts lowercase slugs so I had to e.target.value.toLowerCase() all slug values for the API to respond to my get requests when I use it on mobile. I was following your tutorial -- here's my netflify build angry-bhaskara-6c8f3a.netlify.app/