Запустите, если ключ изменяется, но не на первом рендере в React

Как разработчик, мы можем быть поражены в месте, где мы не хотим запускать какой -то конкретный блок кода или какую -то функцию на первом рендеринге компонента в React, и мы хотим запустить эту функцию только в некоторых ключевых изменениях. Как у нас Использовать где мы указываем наши зависимости, чтобы следить за изменениями подобных вещей

useEffect(() => {
    // the call back function or code if the stateVariable changes
}, [stateVariable]);

Поскольку мы не хотим, чтобы этот код работал на начальном рендеринге, мы можем создать пользовательский подъем

import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;

Чтобы использовать вышеуказанный компонент сначала, мы должны импортировать его в компонент, который вы хотите использовать

import useDidMountEffect from './path_to_UseDidMountEffect';


useDidMountEffect(() => {
  // react please run me if 'key' changes, but not on initial render
    myFunction()
}, [stateVariable]);

const myFunction = () =>{
   console.log('i am up and running');
}

Оригинал: “https://dev.to/rugiguru/run-if-key-changes-but-not-on-first-render-in-react-3j72”