Как вызвать функцию только раз в useEffect при разных изменениях?

Question

[1233211]

У меня есть такой код:

useEffect(() => {
        setPage(1);
    }, [activeTab]);

    useEffect(() => {
        loadItems();

    }, [page, activeTab]);

при переключении таба на странице, мне нужно перейти к первой странице и вызвать функцию loadItems, чтобы она подтянула данные. Сейчас у меня меняется activeTab и если page не 1, то срабатывает сразу второй useEffect, после того, как setPage запишет новую страницу, то второй useEffect снова вызовется. Если второму useEffect не добавлять activeTab и если переключать вкладку, находясь на первой странице, то второй useEffect не вызовется.

Comments

[Артем]

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

useEffect(() => {
        setPage(1);
    }, [activeTab]);

    useEffect(() => {
        if (page ===1) {
        loadItems();
}
    }, [page]);

[Just Me]

слишком запутанно описал, ничего не понятно. Закинь в песочницу и опиши по пунктам, какой эффект надо получить и в чём проблема

Обычно в таких случаях, внутри useEffect пере вызовом ф-ции прописывается условие

[szQocks]

если у функции много зависимостей, но хочешь ты её вызвать 1 раз в useEffect - оборачиваешь функцию в useCallback и эту функцию делаешь зависимостью useEffect

Answer 1

[Alexandroppolus]

Варианты:
1) выкинуть на мороз первый useEffect. При смене activeTab (это ведь происходит по клику на каком-то элементе?) заодно делать setPage(1).
2) дублировать в useRef текущие значения стейта, обновлять во втором эффекте, и не вызывать загрузку при определенной комбинации. Немного костыльный вариант, советую всё таки первый.