ReactのuseEffectで画面描画時に意図せず複数回、処理が実行されてしまう

現象

サンプルとして、以下のような処理があった場合に、期待値としては１回だけ処理をしたいだけなのに、２回/３回と複数回、処理が実行されてしまう。

  useEffect(() => {
      const tx_api_get_decoded = await arweave.api.get('/' + valueArTransactionId);
      setNftImage(tx_api_get_decoded.data.image);
  }, [data]);

原因

（一旦省略）

対応

以下で解決。

1. useEffect内の処理を関数化する
2. useEffectの第２引数の配列を使わない

  useEffect(() => {
    const getNftImage = async() => {
      const tx_api_get_decoded = await arweave.api.get('/' + valueArTransactionId);
      setNftImage(tx_api_get_decoded.data.image);
    };
    getNftImage(); // ← 関数化する
  }, []); // ← 第２引数の配列を使わない

特に、useEffectの第２引数の配列は、挙動がややこしいため、あまり使わないほうがよさそう。
使わなくても済むようなUI/UX設計にするのがよいのかなと。