89文字
1分
編集

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

#Question

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

jsx
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

編集