ReactJS: Как узнать, какая зависимость вызвала запуск/срабатывание хука useEffect?

Пример кода:

useEffect(() => {

//I want to know which was the variable which made the useffect run. var1 or var2. how can I?

}, [var1, var2]);

какая зависимость использовалась для запуска?

reactjs dependencies effect

11.12.2020 17:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

5 030

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Самый простой способ добиться желаемого результата без сторонних библиотек и большого количества кода — разбить useEffect на два useEffect хука и один обработчик.

Решение 1

const handler = () => {
    // ...some logic
};

useEffect(() => {
    // var1 has been changed
    handler();
}, [var1]);

useEffect(() => {
    // var2 has been changed
    handler();
}, [var2]);

Решение 2

Используйте useRef, чтобы сохранить предыдущее состояние, а затем сравните результаты.

const prevVar1 = useRef();
const prevVar2 = useRef();

useEffect(() => {
    if (prevVar1.current !== var1) {
        // var1 has been changed
    }
    if (prevVar2.current !== var2) {
        // var2 has been changed
    }

    // and update the previous state
    prevVar1.current = var1;
    prevVar2.current = var2;

    // ...some logic
}, [var1, var1]);