解答選択肢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」でも紹介されました