Reactでは、コンポーネントの状態または小道具の1つに変化があるたびに、コンポーネントが再レンダリングされます。
このように動作する理由は、前述のデータの変更に「反応」し、それに応じてUIの変更を反映できるようにするためです。

コンポーネントが再レンダリングされるたびに、キャッシュされていないコンポーネント内のロジック（関数、変数など）も再レンダリングされます。

useEffect依存関係の配列に記述されている状態または小道具の変化に対応するのに役立ちます。
このようなイベントでコールバック関数を自動的に実行するオプションが提供されます。

useEffect空の依存関係配列を使用すると、コンポーネントがマウントされたときに1回だけ実行されます。

したがって、この例では-

function myComponent() {
  // some states, variables

  useEffect(() => {
    // do something on mount <= this is my current concern.
  }, [/* empty */]);

  // return Element ...
}

内のコールバック関数useEffectは、コンポーネントが最初に「稼働」したときに1回だけ実行されます。
後続のレンダリングはこれを呼び出しません。

この例では-

function myComponent() {
  // some states, variables

  // do something on mount <= this is my current concern.
  
  // return Element ...
}

そこに入力したものはすべて、コンポーネントが再レンダリングされるたびに実行されます。
これが問題ないかどうかは、ユースケースや実行しようとしている関数、実行するのが「安い」かどうかなどによって異なります。

それらを直接機能させると、コンポーネントの再レンダリング時に毎回実行されます

あなたが言ったように、あなたが空の依存関係を持っているとき（以下のように）、内部のコードはマウントでのみ実行されます。

  useEffect(() => {
    something() // only runs on mount
  }, []);

がまったくない場合はuseEffect、コンポーネントが再レンダリングされるたびにコードが実行されます。

function myComponent() {
  // some states, variables

  something() // runs on every rerender
  
  // return ...
}

ここで問題となるのは、「再レンダリングはいつ発生するのか」です。一般に、親コンポーネントがレンダリングするときはいつでも、Reactはそのコンポーネントのすべての子を再レンダリングします。したがって、再レンダリングは非常に頻繁に発生する可能性があります。

この記事を見てください。この記事には、コンポーネントが再レンダリングされるときの非常に役立つ視覚的な例がいくつかあります。

function myComponent() {
   useEffect(() => {
   }, []);

}

ここでuseEffect(()=>{},[])はcomponentDidMountのように機能します

と

function myComponent() {
}

これは通常のjs関数です

依存関係配列が空の場合、マウントでのみuseEffectを実行します。useEffectを使用していない間は、ページ/コンポーネントを再レンダリングするたびに、コンポーネント内のコードが実行されます。

function myComponent(){
   console.log('render') // will run everytime you render
   return ()
}


function myComponent(){
  useEffect(() => {
    console.log('on mount'); // run on mount
  }, [])
  return ()
}