89 文字
1 分

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

2022-07-22

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

Reactクイズ:要素を返す前にstateを更新すると何が起きるか
https://blog.ohirunewani.com/posts/react-quiz-what-happens-when-updating-state-before-returning-element/
作者
hrdtbs
公開日
2022-07-22
ライセンス
CC BY-NC-SA 4.0