Create a Search Bar With React and Debounce Input

in this video i'm going to show you how to search an api with react so what are we building we're going to search the interpol database of red notices and we're going to debounce the search so what will you learn you'll learn how to search apis with react you'll learn how to debounce input you'll learn a little bit about typescript and you'll learn a little bit about react so there's this api here from interpol and you can see we have this slash notices v1 red and this here takes a full name which is a string we can click try it out here in there swagger docs and it's pre-filled it with some examples here and then we can execute this query and we can see the endpoint that it's hit and we can see the response here so what we're going to do is provide a search box and we're going to allow the user to search by the full name you can search by these other parameters if you like but that is just going to build on top of what we build in this tutorial if you follow along with what we build you're going to be able to also build this full search so i have a next.js application already bootstrapped here and i'm using typescript you can follow along with any react application you like even if you're just using javascript so the first thing i want to do is to set up some use state hooks so i'm going to say const because use state and i'm just going to copy this down three times and the first one is going to be our notices and then i'm going to say set notices and this is where we're going to store all of our notices that we get back from the api the next one is going to be our search and search is going to hold our search string in the docs here their example was daniela and then our last property is just going to be loading and this just means that we're searching the api and we're waiting for our request to come back so let's provide an input here and i'm going to give my input a type of search i'm going to give this a placeholder of search and i'm going to provide an onchange handler here i'm going to say onchange equals and i'm going to give it another function i'm going to take the event here and then i'm going to call set search and i'm going to pass in my event dot target dot value this function here if you want to avoid that you can say function handle set search and then we can pass in the event into here and then we could put our set search into this function here and then we could just pass handle set search into the onchangehandler but i want to just call handle set search down here so i'm going to leave it as this typescript is complaining here because argument type string is not assignable to parameter type set state action undefined and the reason for this is because search here is undefined because we don't have a value in this search box so we can find a value of null but we're still going to have an error and so we can say that search is going to be a string or it's going to be null so what happens when this search parameter changes we want to search the api so we can do that with a use effect hook so i can say use effect and inside of the dependency array for this user fact hook i'm going to put search so this is going to say when search changes call this use effect hook so we want to say search the api and we want to do this with an async function so we could say that the user factbook is an async function however a better way of doing this is to create a new function inside of this use effect talk so i'm going to say async function batch data then when we're fetching i'm going to say set loading to true and i'm going to use the fetch api here so you can say const data is equal to weight batch and i have the endpoint here and the thing that we want to change is this search parameter here so i'm going to put search into here and then because we're using the fetch api we have to call then and we're going to get the response and we're going to return the response json now that we have our data property here we want to say set notices and if we come over to the api and we have a look at the response you can see that we have some data about the response here like what the query was and how many results were returned then we have this embedded and then we have an array of notices what we care about is just this array of notices here so i'm going to say data dot underscore embedded dot notices so we have one little error here and this is the same error as we had before loading is a boolean but at the moment its type is undefined so i'm just going to say that loading defaults to false and that's going to tell typescript that loading is a boolean so the next thing we want to do is to just call this batch data function and once we get the notices we just want to set loading to false so let's get our notices here and i'm going to come down below the input and i'm just going to say json.stringify i'm going to print these to the dom so i can see what they look like and then i'm going to start the application with yarndev so we can see what it looks like in the browser so we have this search box here and we have an empty array which aligns with our notices here which is going to be an empty array in fact we can initialize it there there's an empty array and i'm going to search for tom and you can see we get back a ton of data here so now that i have all this data here i'm just going to copy it all and i'm going to come over to a new tab here and this is app.quicktype.io and i'm going to paste in my data here in fact i should just copy a segment of it because it's too long so i'm going to say stringify notices and i'm just going to stringify the first one so i'm going to copy this data here i'm going to paste this into quick type and you can see that i get this notice data here so i'm going to copy this here and i'm going to come up to the top i'm going to paste in my new interface and then my notices here i'm going to say this is an array of my new notices interface so now we're going to get some typing on our data let's map through our notices and print them to the screen i'm going to say notices dot map and then this is going to be notice and i'm just going to return a div and my div is going to have a key of notice dot entity id and i'm also going to add a class name here and this is going to be styles.notice so now i'm just going to check if the notice has a thumbnail and if it does then i'm going to print the image to the dom so i'm going to say notice dot links dot thumbnail dot href end end and then i'm going to say image and this is going to come from next so i already have image imported at the top here and the source is going to be notice dot links dot thumbnail dot href the width i'm just going to say is 100 pixels the height is just going to be 100 pixels as well and the alt is going to be notice dart name okay so i get this error here and this is telling me that next doesn't know that i want to allow images from this source here and the source is ws public interpol.int so i'm going to come down to my next config and i'm going to say images and then i'm going to allow images from an array of domains and then i'm just going to put this domain inside of that array and i'm going to restart my server refresh to page here and i'm going to search for tom again and you can see that we get an array of images this is saying can it read property undefined of href so undefined of href so i think this is because we need a question mark here and yeah so this is because not all of the notices have an image that go along with them so this dude here he definitely belongs on this list he looks like a bad dude let's print out their name and date of birth and say div class name is equal to styles dot notice body so let's add a p tag here and i'm gonna say notice dot or name and then i'm gonna do notice dot name you can see here we have a name and let's also just print out a date of birth so i'm gonna do another p tag and this is going to be notice dot beta birth okay great so we have some names here and if we have a look at our network requests so every time i search it's going to make a new network request for every single character so you can see here the full name is t and the next one will be t o and then m where we just want to search when the user stops typing for half a second so in theory i should only search for this tom once and we should be able to reduce these three network requests here down to a single network request so we're going to use a debounce hook to do that so i'm going to create a new folder i'm going to call this hooks and inside of hooks i'm going to create a new hook i'm going to call this use debounce dot tsx so i'm going to import from react and i'm going to import use effect and use state there's a function use debounce and then i'm going to export default use debounce so how this is going to work is we're going to update a variable when the user has stopped typing for a given amount of seconds or a delay so i'm going to say value and this value can be anything so i'm just going to type this as any and i'm going to say the delay is a number let me say const and i'm going to use state and i'm going to default this to our value and then this is going to be debounced value and i'm going to say set debounced value next we're going to use a use effect hook as soon as i use effect and i use effect hook is going to have two values in the dependency array and they are going to be value and delay so i want to say const handler is equal to set timeout and i want to set this timeout to our delay and in the body i want to set debounced value to our value and then the next thing to do is to return a function that's just going to say clear timeout and the timeout that we want to clear is our handler here so what this is going to do is clear the timeout or cancel it if our value changes and then when we get to the end of the delay and if the value hasn't changed then we're going to set the value so at the bottom here let's just return a debounced value let's come back and i'm going to say monst debounced search is equal to use debounce and i want to debounce our search property here and i'm just going to debounce this by 500 milliseconds so if i did a thousand here then that would be a full second but i think 500 milliseconds is pretty reasonable so the next thing we need to do is to update our use effect hook to use the debounce search instead of that actual search parameter here so i'm just going to replace search here then i'm going to put our search property in here and then i only want to call fetch data if we have a value in our debout search so i'm just going to say if debounce search and then i'm going to save and then this is going to say if the dbout search is defined then call fetch data let's try this again i'm going to come to the search box here i'm going to select tom and we only get one request here and if we have a look at the request headers you can see that the full name is tom that's the full value and that is because we've debounced the search we have this loading property here that we're setting to true when we start the fetch and then we're setting it to false when the fetch is finished so let's just go ahead and use this property so under the input i'm just going to say if the loading is true then we're just going to print a p tag and we're just going to say loading you could put a spinner in here or something if you like so i'm going to search again for t and you can see that we get a loading property there if you wanted to you could set the notices back to an empty array when we start so you can see that we saw the loading and the array of data simultaneously if you didn't want that effect you could set notices to an empty array and then we're going to set it back down to our results here so now i could search for t and you can see the results array disappear and the loading message appears so if you want to get the code for this application including the debounced function which i use all the time you can find a link to the repository in the description below if you like this video please make sure you like and subscribe and i'll see you in the next video thank you for watching you

Channel: TomDoesTech

Views: 26,232

Keywords: reactjs, debounce, typescript, nextjs, nextjs typescript, react search, react debounce

Id: PySFIsgXNZ0

Length: 17min 4sec (1024 seconds)

Published: Tue Feb 08 2022