クイズ: このReactコンポーネントをマウントしたとき、デベロッパー・コンソールにはどの順番・どんな内容でメッセージが表示されるでしょうか？
解答選択肢1:
a) isInitialized = false
b) isInitialized = true選択肢2:
b) isInitialized = true
a) isInitialized = false選択肢3:
a) isInitialized = false
b) isInitialized = false
a) isInitialized = true問題の回答
:
:
:
:
答えは選択肢3です。ポイントは、下記の３つです
副作用の実行タイミング
setInitialized(true) はuseEffect()を使って副作用として記述されています。副作用はコンポーネントのレンダリングが完了した後に実行されるため、ログに出力されるのは b → a の順番になります。選択肢1は正しくありません。
ステートの値はいつ変化するのか
useEffectで呼び出される初期化処理では、setIsInitialized(true) の直後に console.log()から isInitialized が参照されています。一見 isInitialized は true に変化している様に見えますが、実際の値は false です。useState が返すステート変更メソッドによって次回のレンダリングでは isInitialized は true となりますが、同じレンダリング・フレームではステートは更新されていないことに注意が必要です。このため、選択肢2も正しくありません。
ステートのアップデートによる再レンダリング
setInitialized(true)によって、isInitializedが更新されてReactHooksQuiz01は再度呼び出されます(再度コンポーネントのレンダリングが実行される)。
このため、a) のconsole.logが再度呼び出されます。また、isInitialized の値は true になっています。
選択肢3が正解となります。
まとめ
Reactでウェブ・アプリケーションを実装する際に一般的に使われるようになったFunctional ComponentとHooksですが、状態変化を「タイムライン」で捉えことで、ふるまいを正しく理解することができるようになります。
また、思わぬ再レンダリングを防ぐことができます。
おまけ: U-motion開発部はテクノロジーで農家さんに貢献したいエンジニアを募集中です！！
この記事を読んで「そんなのは当たり前だ」と思ったあなた、あるいは「なるほど、勉強になっと」思ったあなた、デザミス株式会社ではより深い理解でJavaScriptのフロントエンド開発をしたいエンジニアを募集しています。
そして、そんなフロントエンド・エンジニアと一緒に仕事をしたいバックエンド・エンジニアも募集中です。
こちらからお気軽に問い合わせてください。面接は無しでまずはカジュアル面談から、という方も大歓迎です。
フロントエンド
・React + TypeScriptを使った大規模なアプリケーション開発
・React Nativeを使ったネイティブ・アプリケーション開発
バックエンド
・大量のデータを扱うバックエンド開発(Rails、Python、AWS)
はじめてこのブログを読んだ方へ: U-motionとは？
U-motionは牛の首につけたセンサーを使って活動内容を記録、AIの力で健康状態を解析して畜産農家さんをサポートするモニタリング・システムです。
ユーザー様の声
プロダクト紹介
テレビ朝日夕方のニュース番組「スーパーニュースJ」でも紹介されました