DEV Community

Cover image for How to Create a Search Bar in React

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...
Collapse
 
logharaa profile image
Gaël • 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} />;
}
Enter fullscreen mode Exit fullscreen mode

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...).

Collapse
 
emi_castellano profile image
Emi Castellano

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

Collapse
 
joelazevedo profile image
Joel Azevedo

Came here to say the exact same thing.

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks Joel! 👊

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thank you! I have to try it! 🤓

Collapse
 
georgy5 profile image
Karl Keller

I just love the banner photo btw 👌🏼

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

I love it too 😭

Collapse
 
kellykels21 profile image
Marke'l Spellman • Edited

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

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

I am immensely happy to know! ☺️

Collapse
 
anvilicious profile image
Nigel Lowa

Hey, it doesn't work on Chrome mobile browser

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Does not work? And on the desktop? 🧐

Collapse
 
anvilicious profile image
Nigel Lowa

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/

Thread Thread
 
franciscomendes10866 profile image
Francisco Mendes • Edited

Hadn't tested it. Thank you very much for your comment. 👊

Thread Thread
 
anvilicious profile image
Nigel Lowa

Thank you too! Your explanations have made it easier to wrap my head around React hooks.

Thread Thread
 
franciscomendes10866 profile image
Francisco Mendes

I'm so glad to know. 😊

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks for your comment and tip! 👊

Collapse
 
sorindezzy profile image
Raita Dezideriu

Woooow and Wot ! Noh that’s was very amazing I LOVE It

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks for the feedback! 🥺

Collapse
 
luiznasciment0 profile image
Luiz Nascimento

awesome

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks! 🥳

Collapse
 
vucat12 profile image
vucat12

I think debounce can also resolve this issue.

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

I didn't actually try it, but it makes sense 🤔

Collapse
 
codbugs profile image
Coding Bugs

Very well explained!!!

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

I'm glad! Thank you very much! 🤩

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thank you very much! 🥺

Collapse
 
josiahwilliams profile image
Josiah-williams

What can I do if I want to add a button for the search function