Как остановить данные из исходного локального хранилища, используемого для визуализации компонента

Question

Я работаю над приложением реагирующих крючков, где я беру рецепты коктейлей и показываю их. После первоначальной загрузки коктейлей из API я установил их в локальное хранилище и использую локальное хранилище для отображения этих коктейлей на своих страницах. Чтобы это произошло, у меня есть следующий код

const getSearchTerm = async (searchTerm) => {
        const result = await axios(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${searchTerm}`);

        let SetLocalStorage = () => {
            localStorage.setItem('results', JSON.stringify(result));
        };

        function run(callback) {
            localStorage.clear();

            callback();
        }

        run(SetLocalStorage);
    };

проблема возникает, когда я пытаюсь проанализировать и отобразить это содержимое из локального хранилища с кодом ниже

const displayRecipes = () => {
        if (parsedResultsFromLocalStorage) {
            return parsedResultsFromLocalStorage.data.drinks.map((recipe) => (
                <RecipeCard
                    strDrink={recipe.strDrink}
                    strDrinkThumb={recipe.strDrinkThumb}


            strGlass={recipe.strGlass}
                drink={drink}
                key={uuidv4()}
            />
        ));
    } else {
        return (
            <p className="font-style-1 ResultsPage-error-message">
                Uh oh, we don't seem to have anything for {drink}. Did you spell that right?
            </p>
        );
    }
};

, что в компоненте recipecard отображается, как только страница загружается, данные, которые были вызваны из предыдущего поиска, а не текущий. Это происходит, когда эта новая страница загружается слишком быстро, прежде чем в локальное хранилище будут добавлены новые данные из моего нового поискового запроса. Я знаю это, так как, как только я перезагружаю страницу, старые данные исчезают, и у recipecard есть данные, которые я хотел в начальном рендере.

Итак, мой вопрос: стоит ли ждать, пока содержимое моего нового поискового запроса будет загружено в локальное хранилище, прежде чем запустится displayRecipes ()?