Как уменьшить количество вызовов useEffect?

Чтобы преодолеть этот сценарий, React Hooks также предоставляет функциональность, называемую useMemo. Вы можете использовать useMemo вместо useEffect, потому что useMemo кэширует экземпляр, который он отображает, и всякий раз, когда он попадает в рендеринг, он сначала проверяет в кеше, был ли какой-либо связанный экземпляр доступен для данных deps. Если это так, то вместо того, чтобы запускать всю функцию, он просто вернуть его из кеша.

Это не ответ, но слишком много кода, чтобы поместиться в комментарий. Сначала вы можете регистрировать все действия, которые изменяют user.data, временно заменяя исходный корневой редуктор:

let lastData = {};
const logRootReducer = (state, action) => {
  const newState = rootReducer(state, action);
  if (newState.user.data !== lastData) {
    console.log(
      'action changed data:',
      action,
      newState.user.data,
      lastData
    );
    lastData = newState.user.data;
  }
  return newState;
};

Еще одна причина, по которой user.data продолжает меняться, - это когда вы делаете что-то вроде этого в редукторе:

if (action.type === SOME_TYPE) {
  return {
    ...state,
    user: {
      ...state.user,
      //here data is set to a new array every time
      data: [],
    },
  };
}

Вместо этого вы можете сделать что-то вроде этого:

const EMPTY_DATA = [];
//... other code
data: EMPTY_DATA,

Ваш селектор user выходит из состояния и создает новый объект, который вызовет повторную визуализацию компонента, но эффект зависит от user.data, поэтому эффект будет запущен только в том случае, если данные действительно изменились.

Redux devtools также неправильно показывает различия: если вы что-то мутируете в состоянии, devtools покажет их как изменения, но React не увидит их как изменения. Когда вы назначаете новый объект чему-то data:[], тогда redux не будет отображать их как изменения, но React увидит это как изменение.