【React】useMemoによる再レンダリングの抑制について

Question

初めまして。
独学でプログラミングを勉強しており、現在Reactで初めてのWebサービス（タイピングゲーム）を作成しています。

今回、Reactの再レンダリングの抑制で詰まってしまったため、お力をお借りできませんでしょうか。

やりたいこと

useMemoなどを使用して、音声ファイルの再レンダリング(再取得)を抑制したい。

現在作っているサービスは、簡単なタイピングゲームで、単語がひとつづつ表示され、その単語を入力すると次の単語に表示が変わるという形になっています。
今回、新たに単語ごとに読み上げ音声が流れるようにしたところ、音声ファイルをAWS S3からたびたび再取得してしまい、動作が重くなってしまいました。そこで、ページ表示時に音声を取得したら、もう再レンダリングしないよう抑制したいです。

現状のコード

以下に、音声関係の主だったコードを抜き出しました。
（恐らく重要なのは、最初の6行ほどとは思いますが、念のため音声再生に使うコードまで記載しています。）
追記：1~6は全て同じ場所、App.tsxのexport default function App(props) {}内に記載してあります。

//１．音声用の配列を定義
const soundList = [];

//２．AWS S3のURLと単語(props.Words)のidを使用して、音声ファイルのURLを作成＆ロード
 for (let i = 0; i < props.Words.length; i++) {
    if (!props.Words[i]) continue;
        soundList.push(new Audio(S3_BASE_URL + '+(' + props.Words[i].id + ').mp3')
    )

//３．画面に表示されている単語と対応した音声ファイルを入れる定数を定義
  const [audio, setAudio] = useState(soundList[0]);

//audioのstateを更新する関数を定義
  const updateSoundState = (wordId) => {
    audio.pause();
    setAudio(soundList[wordId]);
  }

//４．単語の切り替えと同時に、音声も対応したものに切り替え(単語と音声ファイルの中から、変数numberで該当要素に切り替えています)。
  useEffect(() => {
    // audio更新
    if(number<wordIdList.length){
    updateSoundState(number);
    }
  }, [number]);  

//５．音声ファイルを再生
  useEffect(() => {
    // audio再生
    if(firstModalIsOpen==false){
      setTimeout( function() {
        audio.currentTime = 0;  //再生開始位置を先頭に戻す
        audio.play();  //サウンドを再生
      }, 10 );
    }
  }, [audio]);

試したこと

下記のようにuseMemoを使用してみましたが、変化なしでした。
第2引数を変更するなど、試行錯誤してみましたが、うまくいきませんでした。

//useMemoにて、配列に音声ファイルをpushするfor文を囲むも変化なし。
const weightFunction = useMemo(() => {
  for (let i = 0; i < props.Words.length; i++) {
    if (!props.Words[i]) continue;
        soundList.push(new Audio(S3_BASE_URL + '+(' + props.Words[i].id + ').mp3')
    )
  }
        return soundList;
}, [soundList]);

また音声ファイルが再取得されるタイミングは、一定しておらず、法則性が良く分からないので原因もよくわかりません。

useMemoなどの再レンダリングの制御機能については、今回初めて勉強したため、的外れな質問となっていたら、申し訳ございません。

なにかお分かりの方がいらっしゃいましたら、ご教示いただけますと幸いです。
何卒宜しくお願い致します。

Comments

[hoshi-takanori]

React (Hooks) のコードはどこ (関数の中か外か) に書いてあるかが重要です。1 〜 6 はどこに書きましたか？
あと、「音声ファイルの再レンダリング(再取得)」という書き方に違和感が…。

[panda33]

ご検討いただき、ありがとうございます。
1~6は全て同じ場所、App.tsxのexport default function App(props) {}内にあります（コンポーネントに分けるのもまだ覚束ないため、その他全てのコードもここに記載しています）。

また、技術関連に触れ始めたのが最近のため、誤った言葉遣いをしてしまい恐縮です。

[hoshi-takanori]

つまり 1 の const soundList = []; は App コンポーネントのローカル変数なんですね。それは当然レンダリングのたびに new Audio(〜) されるでしょうね。まずこいつを useState する必要があるかと。(でも、JS の Audio の使い方は知らないので、これ以上はよく分かりません…。)

[hoshi-takanori]

↑ useState じゃなくて useMemo でしたね。このコンポーネントの props に Words という名前 (小文字の方がいいと思うけど…) で単語リストが渡ってくるなら、1 と 2 あわせてこんな感じでしょうか…。

const soundList = useMemo(() => {
return props.Words.map(word => new Audio(S3_BASE_URL + '+(' + word.id + ').mp3'));
}, props.Words);

[panda33]

ありがとうございます！
こちらのコードでうまく挙動させることができました。

Answer 1

下記のようにuseMemoを使用してみましたが、変化なしでした。

soundListの配列は、useMemoの関数内で作成しましょう。外側で作るのでは、配列インスタンスが描画ごとに入れ替わることとなり、メモとしての役割を全く果たしません。

const soundList = useMemo(() => {
  const ret = [];
   for (let i = 0; i < props.Words.length; i++) {
    if (!props.Words[i]) continue;
        ret.push(new Audio(S3_BASE_URL + '+(' + props.Words[i].id + ').mp3')
    )
}, [prop.Words]);

Comments

[maisumakun]

なお、useMemoの引数にprop.Wordsを書いていますが、これが頻繁に置き換わるような活用法では、やはりメモ化は有効となりません。

[panda33]

ありがとうございます。
いただいた内容を使い、無事挙動させることができました。