Можно ли сократить код проверки загруженности данных в React?

Question

[Paul14]

Загружаем данные о клиентах и емейлах с удаленного сервера и помещаем их в стейты clients и mails.
Как только данные загружены нужно выполнять блок кода во втором useMemo из примера ниже. Он так же должен выполняться при изменение других стейтов (для примера я указал только один timeStamp).

Чтобы не повылетали ошибки приходится каждый раз писать проверку. Поскольку приложение большое, подобных useMemo и проверок на загрузку очень много. Можно ли как-то оптимизировать этот код без этой проверки if?
if (!clients || !mails) return false;

const [clients,setClients] = useState(false)
const [mails,setMails] = useState(false)
const [timeStamp, setTimeStamp] = useState(1686765995) 



//Первоначальная загрузка данных с удаленного сервера
useMemo(()=>{
  // loadCLient() - загружаем данные о клиентах с удаленного сервера и помещаем ответ в стейт clients
  // loadMails() - загружаем данные о емейлах с удаленного сервера и помещаем ответ в стейт mails
},[])


useMemo(() => {
  if (!clients || !mails) return false; 
  
  // code ...

}, [clients, mails, timeStamp])

Comments

[WbICHA]

Подожди, ты что, используешь юзМемо как юзЭффект?

[Антон Горецкий]

WbICHA, useEffect для слабаков :)

[Paul14]

WbICHA, именно так, ведь при использовании useEffect с кодом
if (!clients || !mails) return false;
вылетит ошибка и программа закрашится

[WbICHA]

Paul14, конечно, зачем читать ошибки, правда?

Warning: useEffect must not return anything besides a function, which is used for clean-up. You returned: false

[Paul14]

WbICHA, ну, поэтому я и использовал useMemo. Помимо флуда по теме вопроса что-то будет?

[WbICHA]

Paul14, ты не умеешь работать с базовыми инструментами, а уже хочешь более серьёзные советы.

[Paul14]

WbICHA, можете не писать сюда больше

[WbICHA]

Paul14, о, спасибо, что разрешил, а то я боялся остановиться.

[Paul14]

WbICHA, Разрешаю, разрешаю.

Answer 1

[Анатолий Куликов]

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

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

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

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

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

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