Synchronising Event Handler for Search in React

I have been learning js and then React.js over the last few weeks, following tutorials on Codecademy and then Educative.io (to learn with the new hooks, rather than the class-based approach). In an attempt to apply what I have learned I have been messing around creating a number of common website features as React components on a hello-world project.

Most recently I have been trying to make a search component, which uses the Spotify API to search for a track, but have been running into synchronisation issues which I can't quite figure out how to solve using the js synchronisation tools that I know of. I come from a Java background so am more familiar with mutexes/semaphores/reader-writer locks/monitors so it may be that I am missing something obvious. I have been basing the code on this blog post.

In my implementation, I currently have a SongSearch component, which is passed its initial search text as a property, as well as a callback function which is called when the input value is changed. It also contains searchText as state, which is used to change the value of the input.

import * as React from 'react';

interface Props {
    initialSearchText: string,
    onSearchTextUpdated: (newSearchText: string) => void;
}

export const SongSearch = (props: Props) => {
    const [searchText, setSearchText] = React.useState(props.initialSearchText);
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newSearchText = e.target.value;
        setSearchText(newSearchText);
        props.onSearchTextUpdated(newSearchText);
    }
    return <input value={searchText} onChange={onChange}/>;
};

The results are currently just displayed a list in the SearchResults component, the values of which are passed as an array of songs.

import * as React from 'react';

import { SongInfo } from './index';

interface Props {
    songs: SongInfo[]
}

export const SearchResults = (props: Props) => {
    return (
        <ul>
            {props.songs.map((song) => {
                return <li key={song.uri}>{song.name}</li>
            })}
        </ul>
    );
}

In the App component, I pass a callback function which sets the state attribute searchText to the new value. This then triggers the effect which calls updateSongs(). If we have an auth token, and the search text isn't empty we return the results of the API call, otherwise we return an empty list of songs. The result is used to update the tracks attribute of the state using setTracks().

I have cutdown the code in App.tsx to only the relevant parts:

import SpotifyWebApi from 'spotify-web-api-js';
import React from "react";

// ... (removed irrelevant code)

async function updateSongs(searchText: string): Promise<SongInfo[]>{
  if (spotify.getAccessToken()) {
    if (searchText === '') {
      console.log('Empty search text.');
      return [];
    } else {
      // if access token has been set 
      const res = await spotify.searchTracks(searchText, {limit: 10});
      const tracks = res.tracks.items.map((trackInfo) => { 
        return {name: trackInfo.name, uri: trackInfo.uri};
      });
      console.log(tracks);
      return tracks;
    }

  } else {
    console.log('Not sending as access token has not yet');
    return [];
  }
}

function App() {
  // ... (removed irrelevant code)

  const initialSearchText = 'Search...';

  const [tracks, setTracks] = React.useState([] as SongInfo[]);

  const [searchText, setSearchText] = React.useState(initialSearchText);

  React.useEffect(() => {
    updateSongs(searchText)
      .then((newSongs) => setTracks(newSongs))
  }, [searchText]);

  const content = <SearchResults songs={tracks}/>;
  return (
    <ThemeProvider theme={theme}>
      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
        <Root config={mui_config}>
          <Header
            renderMenuIcon={(open: boolean) => (open ? <ChevronLeft /> : <MenuRounded />)}
          >
            <SongSearch initialSearchText={initialSearchText} onSearchTextUpdated={(newSearchText) =>  {
              console.log(`New Search Text: ${newSearchText}`)
              setSearchText(newSearchText);
            }}/>
          </Header>
          <Nav
            renderIcon={(collapsed: boolean)=>
              collapsed ? <ChevronRight /> : <ChevronLeft />
            }
            classes={drawerStyles}
          >
            Nav
          </Nav>
          <StickyFooter contentBody={content} footerHeight={100} footer={footerContent}/>

        </Root>
      </div>
    </ThemeProvider>
  );
}


export default App;

The issue that I am having is that when I type in the name of a long song and then hold down backspace sometimes songs remain displayed in the list even when the search text is empty. From inspection of the console logs in the code I can see that the issue arises because the setTracks() is sometimes called out of order, in particular when deleting 'abcdef' quickly setTracks() the result of updateTracks('a') will be called after the result of updateTracks(''). This makes sense as '' does not require any network traffic, but I have spent hours trying to work out how I can synchronise this in javascript with no avail.

Any help on the matter would be greatly appreciated!