グローバル変数を使用して、getElementByIdでの要素取得の方法

Question

前提・実現したいこと

初歩的な質問をお許しください。。

addEventListenerでクリックイベントを行いたい。

発生している問題・エラーメッセージ

const n = document.getElementById('countUp');

上記のコードをLikeButton()関数や外に記述したらエラーになります。
グローバル変数はどこからでも取得できると思うのですが、なぜuseEffect（）の中に記述しないと動作しないのかがわかりません。

TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

import { useState, useEffect } from 'react';

const n = document.getElementById('countUp');

const LikeButton = () => {
    const [count, counter] = useState(0);

    const Counter = () => {
        counter(count + 1);
    }
    
    
    useEffect(() => {
        n.addEventListener('click',()=>{
            Counter()
        });
    });

    return (
        <>
            <button id='countUp'>Counter: {count}</button>
        </>
    );

}

export default LikeButton;

試したこと

useEffect(() => {

        const n = document.getElementById('countUp');

        n.addEventListener('click',()=>{
            Counter()
        });
    });

上記のようにコードの記述場所を変更したら動作確認できました。
どうぞよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

グローバル変数はどこからでも取得できると思うのですが、なぜuseEffect（）の中に記述しないと動作しないのかがわかりません。

getElementById自体は動作しているものの、DOMが構築される前に実行しているというタイミングの問題でnullを掴んでしまったのではないでしょうか？

Comments

[ikemonnn]

なるほど！！タイミングですか。
調べてみると、useEffect に渡したコールバック関数は必ずレンダリングが完了した後に実行されるとのことです。
だからuseEffectの中に記述していないといけないのですね。
ありがとうございました。