再レンダリングしない方法

Question

・作りたいもの
ビンゴゲームを作っています。
現在の目標は、９マスのビンゴシートを作ることです。
シートの数字は、ゲームのたびに、配置がランダムに変化するようにしたいです。

STARTボタンを押すたびに、数字をランダムで１つ選択し、ここで選択した数字と同じナンバーをシート上で消していき、縦、横、斜め、いずれかで１列消えたらビンゴとしたいです。(現在はシート作りをしており、その他の機能はまだ作り込んでいません)

・今解決したいこと
当初、useEffect内に書いているwhile文は、useEffectを使わずに書いていましたが、STARTボタンを押した時に表示される数字について、useStateを使って更新を行っていることから、ボタンを押すたびに再レンダリングしたくないシート部分まで再レンダリングされ、シート上の数字の配置が変わってしまうという問題が発生しました。

これを解決するため、useEffect内にwhile文を書くという変更を加えました。
useStateの使用による再レンダリングの影響から逃れられると考えたためです。
しかし、この変更により、シートが画面上に表示されなくなってしまいました。

問題解決のため、アドバイスをいただけると幸いです。

import { useEffect, useState } from 'react'
import styled from 'styled-components'

function App() {

  const [selectedNum, setNum] = useState('START')
  
  let nums  = []
  useEffect ( () => {
    let i = 1
    while (i <= 9) {
      const num = Math.floor(Math.random() * (9 + 1 - 1)) + 1
      if(!nums.includes(num)){
        nums.push(num)
        i++
      }
    }
  }, [])

  function selectNum () {
    const array = [0,1,2,3,4,5,6,7,8,9]
    const selectedNum = array[Math.floor(Math.random() * 10)]
    setNum(selectedNum)
  }

  return (
    <>
      <Field>
        {
          nums.map((num, index) => {
            return <div key={index}>{num}</div>
          })
        }
      </Field>
      <SelectedNum>{selectedNum}</SelectedNum>
      <button onClick={selectNum}>ボタン</button>
    </>
  );
}

export default App;

const Field = styled.div`
  box-sizing: border-box;
  height: 270px;
  width: 270px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  div {
    box-sizing: border-box;
    border: 1px solid black;
    height: 90px;
    width: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 25px;
  } 
`

const SelectedNum = styled.div`
  width: 100px;
  height: 100px;
  border: solid 1px black;
  line-height: 100px;
  text-align: center;
`

Comments

[hoshi-takanori]

まず、num も state にする必要があるでしょうね。
また、useEffect 内の while 文は何のためのループですか？
React の再レンダリングは state が変わった部分にだけ影響するので、表示を変えたくない部分は、対応する state の値を変えなければいいだけですけど…。

[Taka009]

返信が遅れ、大変申し訳ございません！
そして、アドバイスありがとうございます。

基本的なことでお恥ずかしいのですが、stateが変わった部分だけ再レンダリングされるという点を認識しておりませんでした。おっしゃる通り、そうであれば、こちらもstateで状態を管理すればうまくいきそうです。
while文は９マスのシートを作るために、数字をランダムに並べた配列を作るために利用しましたが、ループ文を使わなくても、もっとシンプルにランダムな配列を作る方法はありそうですね。もう少し調べてみます。

大変助かりました！！

Answer 1

numsがレンダリングを通じて変わらないようにしたいのであれば、useStateで管理するのが適切です。

const [nums] = useState(() => {
    const ret = [];
    let i = 1
    while (i <= 9) {
      const num = Math.floor(Math.random() * (9 + 1 - 1)) + 1
      if(!ret.includes(num)){
        ret.push(num)
        i++
      }
    }
    return ret;
});

依存配列へ[]を指定したuseEffectを使うと、最初にレンダリングされた時のnumsにだけ値を書き出す、ということになり、2回目以降のレンダリングではnumsは空のままとなります。

Comments

[Taka009]

返信が遅れ、大変申し訳ございませんでした！
アドバイスありがとうございます。

useEffectのそのような挙動を理解しておりませんでした。
console上で配列が確認できていたのに、表示されない理由がこれでわかりました。

stateの初期値をこのように関数で設定することもできるんですね。大変勉強になりました！
ご親切に、ありがとうございます????