Reactクイズ:要素を返す前にstateを更新すると何が起きるか

Question#

次のようなコードを書くと、レンダリングが何回行われるか。

const [state, setState] = useState();
console.log("Pichu");
if (state === undefined) {
setState("Pikachu");
}
console.log("Raichu");
return <div>{state}</div>;

Answer#

1 回のみ。

ただし Strict mode かつ開発環境では 2 回

要素を返す前に state を更新すると現在のレンダリングがスキップされ、再度レンダリングを行おうとするため。

https://beta.reactjs.org/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes