React - useDidMount custom hook

usedMount hookの作成
Reactのクラス要素には、componentDidMountという方法がある.
Report 16.8以降にhookが導入されたが、これと同様のhookはcomponentDidMountにすぎない.
hookを導入すると、custom hookを使う機能が実現できると思いますので、その必要性を感じず、新しいhookを作成しませんでした.
では、自分で実現しましょう.

usedMountの作成

反応器に関するuseEffect説明は以下の通りである.componentDidMount-構成部品のインストール後(つまり、ツリーを挿入した後)に呼び出されます.この方法を使用して、DOMノードを必要とする初期化操作を完了します.
初期レンダリング認知値がcomponentDidMount()値であることが通知された場合、コードブロックはクエリ条件booleanとして入力された場合にのみ実行され、trueと同様の操作が実行される.

useDidMount

import { useRef, useEffect } from 'react';

const useDidMount = () => {
    const didMountRef = useRef(false);

    useEffect(() => {
        didMountRef.current = true;
    }, []);

    return didMountRef.current;
};

export default useDidMount;

初期レンダリング時にcomponentDidMount,useEffectを実行すると、useDidMountの値が返されます.

なぜuseStateではなくuseRefを使用するのか

その理由は、trueの代わりにuseStateを用いた後、useRefを1つ追加すれば理解できるからである.console.logはDOMを更新するため、useStateは2回撮影される.
これは不要な場合なのでconsole.logを使用しました.