https://zenn.dev/taroro28/articles/49e95f01bab7ae

ぬぬ、「DOMをブラウザに描画する」ところまでrenderと呼んでしまう感じか。
それはrenderではなく厳密にはペイントだが、まぁいいや

render

ここでは関数Componentのreturnを実行して、DOMをブラウザに描画することを指します。

ちなみにDOM更新するのがcommit。

render -> commit -> paint

Q1: 第2引数の配列に要素を渡した場合

正解。unmount時に発火させたいならクリーンアップ関数書かないといけないので1, 2

Q2: 第2引数に空配列を渡した場合

正解。依存配列を空配列にすると初回commit後のみ発火

いや、commit後どころかペイント後ぽいな。画面更新後ということは。

エフェクトは、コミットの最後に、画面が更新された後に実行されます。

https://ja.react.dev/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events

今気づけて良かった

Q3: 第2引数に何も渡さない場合

正解。第二引数を省略すると毎回実行されるやつ

Q4: 第2引数の配列に要素を渡した場合

ぬ？？？1, 2, 3だと思ったら2, 3だった。

開発中でstrict modeだったら初回renderでクリーンアップも出るはずだぞ...？試してみよう

うん、やっぱり発火した。

この問題はstrict modeを使わないもしくは本番環境の想定だということなんだろうな、理解

Q5: 第2引数に空配列を渡した場合

正解。本番環境という想定なら3だけだな

Q6: 第2引数に何も渡さない場合

正解。第二引数省略なら毎renderとunmountで発火する

Q7: 第2引数の配列に要素を渡した場合

正解。クリーンアップで拾うstateは変更前の状態のスナップショットなので変更前の値になる

終了。だいぶ基本の問題だった。公式ドキュメント読んだ人なら当然全部わかるはず