CODEWITHSUNDEEP
javascriptreactjsasynchronousasync-awaitaxios
Jim_Mcdonalds
Jim_Mcdonalds

Reputation: 496

ReactJS - Async Auto Complete API Response Handling

Background

I am new to ReactJS and needs to create a search field with autocomplete that:

  1. Allows free type
  2. Each user input trigger API request to return a list of matching array
  3. The auto-suggestions should show the latest result

Problem

API response returns in a non-linear order; 1st request could respond later than 2nd request, this caused the State to store not the latest request.

export const SearchBar = () => {

const [state, setState] = useState({list: []})

const apiHandler = (term) => {
  axois.post('www.abc.com',term)
    .then((r)=> {setState({list: r.data})})
}

return(
...
)}

What would be the ways to resolve this?

Thank you.

Upvotes: 2

Views: 1627

Answers (2)

brein
brein

Reputation: 1419

as already suggested you should avoid hitting an api for every keystroke with a debouncing strategy. Anyway if you don't care about stressing your server with too many requests you can make use of a ref hook to make sure that the response from the api is still relevant.

I have created a working example with plenty of comments here: https://codesandbox.io/s/awesome-leakey-kil2e?file=/src/App.js

Upvotes: 2

timbersaw
timbersaw

Reputation: 660

You should not hit an api on every user input. You have to debounce that function so it delays the call and you can minimize the number of request made to api with good UX.

Lodash Debounce

Also if you are using react you can use this module

use-debounced-effect

you can pass your input variable as dependency.

Upvotes: 2

Related Questions