В каких случаях используют useEffect без второго аргумента в виде массива?

Question

[Boris007]

В каких случаях используют useEffect без второго аргумента в виде массива?
В примерах useEffect практический всегда используют его со вторым аргументом []
Для чего сделали у хука useEffect возможность работать рекурсивно?

Comments

[WbICHA]

Для чего сделали у хука useEffect возможность работать рекурсивно?

А ты вообще знаешь что такое "рекурсия"?

[Boris007]

WbICHA, да, наверное я не корректно выразился, ну в плане, что он, при использовании useState бесконечный цикл замыкает
Больше вопрос был про то, используют ли useEffect без второго аргумента

[Егор Живагин]

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

Answer 1

[Alexandroppolus]

использовал для кейса, когда есть реф и у этого рефа current мог меняться во время жизни компонента.

вкратце:

const ref = useRef<HTMLDivElement>(null);
const prevRef = useRef<HTMLDivElement>(null);

useEffect(() => {
    if (ref.current === prevRef.current) { return; }
    prevRef.current = ref.current;

    // реф поменялся, что-то делаем
});

по факту я здесь делаю то же самое, что происходит в депенденсах, но депенденсы непригодны:
1) [ref] - бесполезно, будет один и тот же, эффект не перевызовется
2) [ref.current] - бесполезно, реф меняется после фазы рендера.

Comments

[Boris007]

Спасибо!
Т.е. useRef это тот же useState, только при его изменении не происходит ререндер?

[chemdev]

Boris007, выходит что не то же самое

[Alexandroppolus]

useRef это тот же useState, только при его изменении не происходит ререндер?

насчет "тот же" не уверен, но ререндер точно не происходит))

в целом с помощью useState всегда можно заменить useRef

[Boris007]

Alexandroppolus, а этот пример про элементы это из какого кейса?

[Alexandroppolus]

Boris007, у меня там была подписка на ResizeObserver

[WbICHA]

Alexandroppolus, а зачем здесь юзэффект?

[Alexandroppolus]

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

[WbICHA]

Alexandroppolus, честно говоря, не очень понимаю зачем тут 2 рефа и почему необходим эффект без зависимостей.)
Почему бы просто не написать так:

const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
    // реф поменялся, что-то делаем
}, [ref.current]);

[Alexandroppolus]

WbICHA, так я же написал, что ref.current меняется после рендера.

Кейс:

const useNNN = (ref) => {
    useEffect(() => {
        // реф поменялся, что-то делаем
    }, [ref.current]);
}

const MyComp = (props) => {
    const ref = useRef(null);
    useNNN(ref);

    return (
        ...
        {props.someCondition && <div ref={ref} />}
        ...
    );
};

На стартовом рендере (монтирование компонента) props.someCondition === false и ref.current остался нулл.
На втором рендере props.someCondition поменялся и ref таки залетел в свой < div>. Но эффект не перевызовется, потому что когда на втором рендере создавался массив депенденсов для эффекта, в ref.current всё ещё было null

[WbICHA]

Alexandroppolus, может я туплю, но я не вижу отличия в поведении, если использовать вариант из твоего ответа.

[Alexandroppolus]

WbICHA, вот тебе пример для вдумчивого рассмотрения)

https://codesandbox.io/s/boring-rgb-7g6xu9?file=/s...

в useDeps для эффекта указаны депсы, и он не перевызывается.
в useNoDeps не указаны, и он перевызывается.

[WbICHA]

Alexandroppolus, всё, я понял проблему, спасибо. Как-то даже не задумывался, что реф будет присвоен после выполнения тела компонента, но перед эффектом. Так-то логично, если подумать, но я не подумал. :D
С другой стороны лично я смысла в таком решении всё равно не визжу банально потому, что изменение рефа всё равно не тригернёт ререндер, а если он тригерится, значит есть стейт, изменение которого его тригернёт (в данном случае рендерДив), и вот повесив зависимость от стейта и использовав реф напрямую ненадо будет иметь ещё один реф для проверки изменения нашего рефа и эффект будет тригериться только тогда, когда надо. Собственно, по этой причине я с таким поведением никогда и не сталкивался.)
Но в любом случае спасибо за хороший пример.

[Alexandroppolus]

WbICHA,

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

в моем примере useEffect отъехал в пользовательские хуки, точно так же как в реальном случае с проекта.
У этих хуков (useDeps/useNoDeps) есть только один параметр - реф. То, как ты предлагаешь, это надо передавать им ещё массив депенденсов, который там будет передан в useEffect. Это усложнит интерфейс хуков, к тому же react-hooks/exhaustive-deps не сможет проконтролировать оный массив. Придется вручную помнить, при смене каких именно стейтов/пропсов/контекста поменяется ref.current (а не просто будет ререндер, ибо не каждый ререндер меняет значение в рефе). В общем, неудобно со всех сторон. Гораздо проще держать второй реф и самому проверять, что current поменялся.

реф будет присвоен после выполнения тела компонента, но перед эффектом.

его проставляют на фазе эффектов хуков useLayoutEffect/useImperativeHandle. Собственно, что-то вроде последнего и выполняется внутри < div > (любого встроенного компонента). На момент срабатывания useLayoutEffect значения в рефе может и не быть: пример с чилдом

[WbICHA]

Alexandroppolus, согласен, в таком случае имеет смысл. Это, конечно, крайне редкий кейс, но решение интересное.

его проставляют на фазе эффектов хуков useLayoutEffect/useImperativeHandle. Собственно, что-то вроде последнего и выполняется внутри < div > (любого встроенного компонента). На момент срабатывания useLayoutEffect значения в рефе может и не быть: пример с чилдом

Ну да, логично.)

[Alexandroppolus]

WbICHA, глянул сейчас свежим взглядом на свой хук, и выяснилось, что подход не универсальный: не учтен кейс, когда ref.current поменяется, но без ререндера компонента с хуком. И именно, когда я передаю реф не в < div >, а в какой-нибудь кастомный чилд, который может ререндериться самостоятельно. Тогда useEffect вообще не вызывается, и за ref.current надо следить самостоятельно. Например, ref должен быть мобиксовым стором с наблюдаемым полем current..

[WbICHA]

Alexandroppolus, иными словами, зависимости рулят. :D