Paul14

для этого есть реактивность.

<template>
  <child-component v-bind="globalObject"/>
</template>

<script setup>
// import { Alien, DevTools, Test, ChildComponent } from 'where?'
import { reactive } from 'vue'

const globalObject = reactive({prop1, prop2, prop3})
</script>

а вообще читайте документацию. https://vuejs.org/guide/components/props.html - для новичков там исчерпывающе

Потом работаю с ними в реакте, выводя графики продаж, отгрузок и прочее.

Так, а это вот все в одну кучу нужно, или для каждого графика нужно свой набор данных? Не проще каждый график строить по отдельному запросу? Таким образом во первых вы разделите потоки, уменьшите данные на один запрос, и практически аннигилируете нагрузку на фронт.

Для начала необходимо понять по какой причине ответ от сервера около 3 секунд.
Тут может быть проблема в настройках, слабом сервере или ещё чего из большого списка возможностей.

Далее нужно понять почему данные вы получаете 7-8 секунд.
Тут может быть как первая причина, так и просто неоптимизированный, кривой код. Опять же, разбираемся!

В любом случае нужно всю логику пихать в сервер, а клиенту отдавать уже готовые данные для отображения. Клиент не должен страдать из-за больших данных, тем более владельцы мобильных телефонов. Для них это будет ужс и они уйдут из вашего продукта.
PS: Я бы и сам не стал ждать такой долгой загрузки.

UPD:
Банальный пример из практики. У нас в проекте был очень старый код, который написан был лет 5 назад. Новички думали что просто сервер слабый. Но покопавшись в коде стало ясно, что код крайне неоптимизированный и мы его оптимизировали.
Раньше загружалось более 60 секунд (как правило уходил в таймаут. т.е. вообще не загружались при малом количестве фильтров по данным)
Стало: около 10-20 секунд.
И это те же данные...

Провести диагностику и анализ того, какие именно данные запрашиваются, откуда, каким образом и как они попадают туда, где они нужны. Т.е., исследовать путь данных и механизм их получения. Далее изучить на каком этапе происходит задержка или задержки и уже от этого момента проектировать решение. В общем случае можно сделать следующее:

• оптимизировать запрос для получения данных
  
• оптимизировать формат передачи данных
  
• добавить сжатие данных
  
• сделать кэширование, возможно даже в несколько уровней
  
• обновить железо сервера на более мощное
  
• оптимизировать или сменить БД на более подходящую для задачи
  
• часть или все вычисления производить на сервере и выдавать готовый результат в нужном виде
  

Ну, как минимум для начала вам нужно вызов функций загрузки поместить в useEffect. Если я правильно понял логику, то нужно сделать следующим образом:

- добавить ещё один стейт, который будет отвечать за состояние загрузки, например loading/setLoading

- затем в useEffect при маунте проверять их на наличие объектов: если пустые и loading !== true, то грузить, иначе ничего не делаем

- вызываем одну функцию, где будем грузить данные: сначала переводим loading в true берем Promise.all/allSettled и ждем загрузки; в finally возвращаем loading на false

- как только все загрузится, то второй useMemo самостоятельно выполнится, так как оба* стейта обновятся

* оба, т.к. не понял, зачем тут timestamp.

Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

Не она, а они. Выбираете подсказку - значение меняется. Поменялось значение - запускается эффект, в котором заново вычисляется массив подсказок, и они отображаются.

Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

const onChange = ({ target: { value } }) => {
  setVal(value);
  setPrintVariables(value.length > 1
    ? arrayVariables.filter(n => n.includes(value))
    : []
  );
};

<input value={val} onChange={onChange} />

??

preg_replace('/([а-яё])([А-ЯЁ])/u', '$1. $2', $str)

или

implode('. ', preg_split('/(?<=[а-яё])(?=[А-ЯЁ])/u', $str))

Время получения 40000+ записей из таблицы offers = 0.2s

Вот такой код отрабатывается за 4s

то есть в цикле делается 40тыс запросов к таблице clients каждый из который выполняется за 0.0001 sec

вам точно надо прочитать про JOIN'ы чтобы одним запросом получить все нужные данные
https://www.w3schools.com/sql/sql_join.asp

Что значит "конкретной обёртки?
Обработчик какого-то элемента?
Открывайте инструменты разработчика, тыкайте селектором в элемент.
И на той панели где отображаются стили элемента есть вкладка "Event Listeners" ну или том языке, какой у Вас выбран. Там можно посмотреть все обработчики данного элемента.

Если что-то другое, то можно открыть вкладку Sources, сбоку в "проводнике" найти js файлы и искать код там.

Ваш код очень бажный. Во-первых, вы не проверяете результат выполнения indexOf и проверка работает ровно наоборот. Во-вторых, значение поискового поля вы добавляете не в виде get-параметра, а прямо в тело адреса, что снова делает предыдущую проверку нерабочей. Ну и наконец, даже если всё это исправить, у вас всё равно будет баг - любой get-параметр, название которого заканчивается на "q", будет попадать под условие и подстановка не произойдёт.

Максимально тупое решение в лоб с перезагрузкой страницы:

if (
    window.location.search.indexOf('?q=') === -1 &&
    window.location.search.indexOf('&q=') === -1
) {
    window.location.search += (window.location.search ? '&' : '?' ) + 'q=' + searchInput.value;
}

В современном же js есть куда более удобные инструменты для решения этой задачи:
https://developer.mozilla.org/en-US/docs/Web/API/U...
https://developer.mozilla.org/ru/docs/Web/API/Hist...