ReactJS – Async Auto Complete API Response Handling


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


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) => {'',term)
    .then((r)=> {setState({list:})})


What would be the ways to resolve this?

Thank you.

26 thoughts on “ReactJS – Async Auto Complete API Response Handling”

Leave a Comment