Проблема с useEffect?

Question

[Андрей Охотников]

У меня есть запрос к апи при изменении 3-х параметров в состоянии, соответственно записано это примерно так

useEffect(() => {тут запрос}, [param1, param2, param3])

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

Answer 1

[Александр]

Используйте объект.

const [params, setParams] = useState({
    name: "John",
    email: "[e-mail]",
    age: 30
});

Пример.

Comments

[Андрей Охотников]

в данном примере все свойства объекта меняются одновременно, если нет, то это не поможет, у меня как раз параметры приходят не одновременно

Answer 2

[Никита Геннадич]

Добавьте в стейт isFirstRender, например...

const [isFirstRender, setNotFirstRender] = useState(true);

useEffect(() => {
	if(isFirstRender) {
		// тут запрос
		setNotFirstRender(false);
	}
}, [param1, param2, param3, isFirstRender]);

Но, вообще, я бы всё-таки посмотрел в сторону использования цепочки промисов, чтобы параметры устанавливались лишь по мере получения последнего, это было бы более красивым решением (имхо).

Что-то типа:

useEffect(() => {
	Promise1.then(() => { // первый параметр
		Promise2.then(() => { // второй
			Promise3.then(() => { // третий
			}
		}
	});
}, [param1, param2, param3]);

Хотя слишком много промисов тоже так себе конструкция... Я бы на вашем месте подумал всё ж где можно улучшить архитектуру.