Перехватчики реакции используют эффект только при обновлении?

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

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
     isInitialMount.current = false;
  } else {
      // Your useEffect code here to be run on update
  }
});

Мне очень нравится ответ Шубхама, поэтому я сделал кастомный хук.

/**
 * A custom useEffect hook that only triggers on updates, not on initial mount
 * @param {Function} effect
 * @param {Array<any>} dependencies
 */
export default function useUpdateEffect(effect, dependencies = []) {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      return effect();
    }
  }, dependencies);
}

И Шубхам, и Марио предлагают правильный подход, однако код все еще неполный и не рассматривает следующие случаи.

1. Если компонент размонтируется, он должен сбросить свой флаг
2. Передающая функция effect может иметь возвращаемую из нее функцию очистки, которая никогда не будет вызвана.

Ниже приводится более полный код, который охватывает два вышеперечисленных отсутствующих случая:

import React from 'react';

const useIsMounted = function useIsMounted() {
  const isMounted = React.useRef(false);

  React.useEffect(function setIsMounted() {
    isMounted.current = true;

    return function cleanupSetIsMounted() {
      isMounted.current = false;
    };
  }, []);

  return isMounted;
};

const useUpdateEffect = function useUpdateEffect(effect, dependencies) {
  const isMounted = useIsMounted();
  const isInitialMount = React.useRef(true);

  React.useEffect(() => {
    let effectCleanupFunc = function noop() {};

    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      effectCleanupFunc = effect() || effectCleanupFunc;
    }
    return () => {
      effectCleanupFunc();
      if (!isMounted.current) {
        isInitialMount.current = true;
      }
    };
  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};

Другим подходом может быть вызов useEffect дважды или более, в зависимости от «проблемы». См. ответ Руди Наппе из комментариев ниже сообщения в блоге:

https://dev.to/savagepixie/how-to-mimic-componentdidupdate-with-react-hooks-3j8c

В двух словах:

useEffect(concern1, [...]);
useEffect(concern2, [...]);
...

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

Вы можете обойти это, установив для состояния нелогическое начальное значение (например, нулевое значение):

  const [isCartOpen,setCartOpen] = useState(null);
  const [checkout,setCheckout] = useState({});

  useEffect(() => {

    // check to see if its the initial state
    if ( isCartOpen === null ){

      // first load, set cart to real initial state, after load
      setCartOpen( false );
    }else if (isCartOpen === false){

      // normal on update callback logic
      setCartOpen( true );
    }
  }, [checkout]);

Принял помощь от ответа Subham Этот код будет выполняться только для обновления конкретного элемента, а не при каждом обновлении и не при первоначальном монтировании компонента.

const isInitialMount = useRef(true);    //useEffect to run only on updates except initial mount


//useEffect to run only on updates except initial mount
  useEffect(() => {
    if (isInitialMount.current) {
        isInitialMount.current = false;
     } else {              
         if (fromScreen!='ht1' && appStatus && timeStamp){
            // let timeSpentBG = moment().diff(timeStamp, "seconds");
            // let newHeatingTimer = ((bottomTab1Timer > timeSpentBG) ? (bottomTab1Timer - timeSpentBG) : 0);
            // dispatch({
            //     type: types.FT_BOTTOM_TAB_1,
            //     payload: newHeatingTimer,
            // })
            // console.info('Appstaatus', appStatus, timeSpentBG, newHeatingTimer)
         }
     }
  }, [appStatus])

Короче один

const [mounted, setMounted] = useRef(false)

useEffect(() => {
  if (!mounted) return setMounted(true)
  ...
})

Реагировать на хуки

Крюк

export const useMounted = () => {
  const mounted = useRef(false)

  useEffect(() => {
    mounted.current = true
    return () => {
      mounted.current = false
    }
  }, [])

  return () => mounted.current
}

Применение

const Component = () => {
  const mounted = useMounted()

  useEffect(() => {
    if (!mounted()) return
    ...
  })
}

Используйте Функция очисткиuseEffect без использования пустого массива в качестве второго параметра:

useEffect(() => { 
  return () => {
  // your code to be run on update only.
  }
});

Чтобы сделать пользовательский хук совместимым с правилами хуков, вам не нужно фактически передавать зависимости, просто оберните функцию эффекта с помощью useCallback

function useEffectOnUpdate(callback) {
  const mounted = useRef();

  useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
    } else {
      callback();
    }
  }, [callback]);
};

function SomeComponent({ someProp }) {
  useEffectOnUpdate(useCallback(() => {
    console.info(someProp);
  }, [someProp]));

  return <div>sample text</div>;
}