Вызовите api перед первым рендерингом в функциональном компоненте в React. js

Question

Если я хочу вызвать API после первого рендеринга компонента, я знаю, что у нас есть useEffect ловушка для вызова метода API. (Я говорю только о функциональных компонентах. Отсутствует компонент класса).

Есть ли способ, я могу вызвать API, прежде чем мой компонент отобразится в первый раз.

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

Редактировать: У меня есть пара советов, чтобы использовать useLayoutEffect или любой флаг расходных материалов, чтобы проверить, отображается ли он или нет. Я проверил, что useLayoutEffect не работает, и с помощью флага расходных материалов мы только увеличиваем сложность.

Есть ли у нас лучший способ для этого?

Answer 1

Я думаю, useLayoutEffect можно использовать для чего-то подобного, передавая пустой массив в качестве второго аргумента. useLayoutEffect(() => {...}, []);

Обновления, запланированные внутри useLayoutEffect, будут сбрасываться синхронно до того, как браузер сможет рисовать.

Хотя вы всегда можете извлечь данные в родительском компоненте и передать его в качестве реквизита. Или - если вы не возражаете, что это экспериментальная функция на данный момент - React Suspense пытается решить именно эту проблему.

Answer 2

Не существует правильных способов сделать вызов API до визуализации компонента из того же компонента.

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

Еще один обходной путь для такого случая - оставить флаг consumable внутри компонента, сделать запрос внутри useEffect, ничего не рендерить или каким-то другим образом загрузить и рендерить что-то только после успешного завершения запроса.