ReactのuseEffectの初回レンダリングについて

Question

前提・実現したいこと

初回レンダリング時のuseEffectの作用を理解したい。

該当のソースコード

import { useState, useEffect } from 'react'


const App = () => {

const [state, setState] = useState([{id:0, name:"init"}])

const arr = [{id: 1, name: "tom"},{id: 2, name: "tim"},{id: 3, name: "tum"},{id: 4, name: "tem"}]


  useEffect(() => {
    setState([{id: 0, name: "tam"}, ...arr])
  },[])
  
  console.log(state);


  return (
      <div>
        <p>{state[0].name}</p>
        <p>{state[1].name}</p>
      </div>
  )
}

export default App

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

TypeError: Cannot read property 'name' of undefined

試したこと

これはuseEffectがレンダリング後に実行されるためにレンダリング時に

state[1].name

に値が入っていないからだと思うのですが

      <div>
        <p>{state[0].name}</p>
        <p>{state[1].name}</p>
      </div>

の部分を

        <ul>
          {state.map(el => (
            <li>{el.name}</li>
          ))}
        </ul>

に変更すると問題なくレンダリングされるのは何故でしょうか？

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

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",

Comments

[hoshi-takanori]

「useEffect は毎回のレンダー後に呼ばれるのか？ その通りです！」
https://ja.reactjs.org/docs/hooks-effect.html#example-using-hooks

Answer 1

変更すると問題なくレンダリングされるのは何故でしょうか？

仮にstateが1要素しかなかった場合、mapではstate[0]しか参照されません。

Comments

[mentanpinsan]

すみません、よくわからないです。この例の場合、stateは配列１つだけですがその配列は５要素あって
５要素全てがレンダリングされています。

[maisumakun]

最初にエラーとなった「レンダリング時にstate[1].nameに値が入っていない」という事態が起きない、ということです。

[maisumakun]

> stateは配列１つだけですがその配列は５要素あって
５要素全てがレンダリングされています。

（エラーで止まってしまった場合は別ですが）stateが更新されると、更新された内容に合わせて再描画が行われます。

[maisumakun]

useEffectやsetStateは非同期に動作しますので、最初の描画時にはstateが「[{id:0, name:"init"}]」だけのままで実行されます（ここでmapでないほうのコードではstate[1].nameの参照に失敗してエラーで止まります）。

その直後にuseEffectが実行され、stateは要素が5つの配列となります。

[mentanpinsan]

mapがstate[0]しか参照しないのに、なぜ５要素レンダリングされているのかがわからなかったのですが、
初回描画はinitial stateだけレンダリングされてエラーは起こらない->
その後useEffectが実行されてstateが更新されて再描画されて５要素レンダリングされる
という流れだったのが解説のおかげでようやくわかりました。
ありがとうございました。