キーの変更が実行されていない場合は

開発者として、我々は、いくつかの特定のブロックのコードまたはいくつかの機能を、コンポーネントの最初のレンダリングで反応させたくない場所に衝突する可能性があります.私たちがuseEffectを持っているので、変更を監視するために依存関係を指定します

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');
}