useEffect

useEffectを使ったコンポーネント

全てのケースにおいて、検証用コードを書いて、質問に答えよ。
検証用コードは全てGitHubなどでリポジトリを作成して残しておくこと。

ケース

• コンポーネント１つuseEffectを定義
  • deps未指定する場合における
    • コンポーネント初期表示時
  • depsにnumber型のステートを指定する場合における
    • コンポーネント初期表示時
    • ステートを変更時
  • depsにnumber型の配列のステートを指定する場合における
    • ステートを新しいnumber型の配列を変更した時
    • ステートの配列の1要素を変更した時
  • depsにObject型のステートを指定する場合における
    • ステートを新しいObjectを設定した時
    • ステートの特定の属性を変更した時
  • depsにObject型の特定の属性をステートを指定する場合における
    • ステートを新しいObjectを設定した時
    • ステートの特定の属性(deps指定)を変更した時
    • ステートの特定の属性(deps未指定)を変更した時

質問

下記処理が実行されるか、実行される場合は実行順番を答えよ

• コンポーネントの処理でuseEffectより上に定義したもの
• コンポーネントのuseEffectの関数の処理
• コンポーネントのuseEffectの関数の戻り値の関数の処理
• コンポーネントの処理でuseEffectより下に定義したもの

親（useEffectあり）と子（useEffectなし）

全てのケースにおいて、検証用コードを書いて、質問に答えよ。
検証用コードは全てGitHubなどでリポジトリを作成して残しておくこと。

ケース

• 親でuseEffectを定義、子を定義
  • 親でdepsにObject型の特定の属性をステートを指定する場合における
    • ステートを新しいObjectを設定した時
    • ステートの特定の属性(deps指定)を変更した時
    • ステートの特定の属性(deps未指定)を変更した時
• 上記の親子入れ替えた場合

質問

下記処理が実行されるか、実行される場合は実行順番を答えよ

• 親の処理でuseEffectより上に定義したもの
• 親のuseEffectの関数の処理
• 親のuseEffectの関数の戻り値の関数の処理
• 親の処理でuseEffectより下に定義したもの
• 子コンポーネントの処理

親（useEffectあり）と子（useEffectあり）

全てのケースにおいて、検証用コードを書いて、質問に答えよ。
検証用コードは全てGitHubなどでリポジトリを作成して残しておくこと。

ケース

• 親でdepsにObject型の特定の属性をステートを指定、子でdeps未指定の場合における
  • ステートを新しいObjectを設定した時
  • ステートの特定の属性(deps指定)を変更した時
  • ステートの特定の属性(deps未指定)を変更した時
• 上記の親子を入れ替えた場合

質問

下記処理が実行されるか、実行される場合は実行順番を答えよ

• 親の処理でuseEffectより上に定義したもの
• 親のuseEffectの関数の処理
• 親のuseEffectの関数の戻り値の関数の処理
• 親の処理でuseEffectより下に定義したもの
• 子の処理でuseEffectより上に定義したもの
• 子のuseEffectの関数の処理
• 子のuseEffectの関数の戻り値の関数の処理
• 子の処理でuseEffectより下に定義したもの

親（useEffectあり）と子A（useEffectあり）と子B（useEffectあり）

全てのケースにおいて、検証用コードを書いて、質問に答えよ。
検証用コードは全てGitHubなどでリポジトリを作成して残しておくこと。

ケース

• 親でdeps未指定、子Bでdesp未指定
  • 子AでdepsにObject型のステートを指定する場合における
    • ステートを新しいObjectを設定した時
    • ステートの特定の属性を変更した時
• 上記の親と子Aを入れ替えた場合

質問

下記処理が実行されるか、実行される場合は実行順番を答えよ

• 親の処理でuseEffectより上に定義したもの
• 親のuseEffectの関数の処理
• 親のuseEffectの関数の戻り値の関数の処理
• 親の処理でuseEffectより下に定義したもの
• 子Aの処理でuseEffectより上に定義したもの
• 子AのuseEffectの関数の処理
• 子AのuseEffectの関数の戻り値の関数の処理
• 子Aの処理でuseEffectより下に定義したもの
• 子Bの処理でuseEffectより上に定義したもの
• 子BのuseEffectの関数の処理
• 子BのuseEffectの関数の戻り値の関数の処理
• 子Bの処理でuseEffectより下に定義したもの