各種Hooks、React.memo
React.memo、useState
全てのケースにおいて、検証用コードを書いて、質問に答えよ。
検証用コードは全てGitHubなどでリポジトリを作成して残しておくこと。
ケース
- 子をReact.meoでmemo化しない場合
- 親（ステートあり、useMemoなしで算出結果を変数に代入）、子（親のステートを引数にとる）
- ステートがnumber型、算出処理でステート利用
- 初期表示時
- 値変更時
- ステートがnumber型の配列、算出処理でステート利用
- 初期表示時
- 配列を変更時
- 配列の要素を変更時
- ステートがObject、算出処理でステート利用
- 初期表示時
- Objectを変更時
- Objectの特定の要素を変更時
- ステートがnumber型、算出処理でステート利用
- 親（ステートあり、useMemoありで算出結果を変数に代入）、子（親のメモ化された値を引数にとる）
- depsなし
- 初期表示時
- depsがnumber型、useMemoでステート利用
- 初期表示時
- 値変更時
- depsがnumber型の配列、算出処理でステート利用
- 初期表示時
- 配列を変更時
- 配列の要素を変更時
- depsがObject、算出処理でステート利用
- 初期表示時
- Objectを変更時
- Objectの特定の要素を変更時
- depsなし
- 親（ステートあり、useMemoなしで算出結果を変数に代入）、子（親のステートを引数にとる）
- 子をReact.memoでmemo化する場合
- しない場合とケースは同様
質問
下記処理が実行されるか、実行される場合は実行順番を答えよ
※実行順番というよりは、実行されるかがメインの質問
- 親の処理
- 親のuseMemoの処理
- 子の処理
- 子のuseMemoの処理
useCallback、useState
全てのケースにおいて、検証用コードを書いて、質問に答えよ。
検証用コードは全てGitHubなどでリポジトリを作成して残しておくこと。
ケース
- 親（ステートあり、useCallbackなしの関数あり）、子（引数は親の関数とステート変更関数）
- ステートがnumber型、関数でステート利用
- 初期表示時
- 親で値変更時
- 子で値変更時
- ステートがnumber型の配列、関数でステート利用
- 初期表示時
- 親で配列を変更時
- 親で配列の要素を変更時
- 子で配列を変更時
- 子で配列の要素を変更時
- ステートがObject、関数でステート利用
- 初期表示時
- 親でObjectを変更時
- 親でObjectの特定の要素を変更時
- 子でObjectを変更時
- 子でObjectの特定の要素を変更時
- ステートがnumber型、関数でステート利用
- 親（ステートあり、useCallbackありの関数あり）、子（引数は親の関数とステート変更関数）
- depsなし
- 初期表示時
- depsがnumber型、関数でステート利用
- 初期表示時
- 親で値変更時
- 子で値変更時
- depsがnumber型の配列、関数でステート利用
- 初期表示時
- 親で配列を変更時
- 親で配列の要素を変更時
- 子で配列を変更時
- 子で配列の要素を変更時
- depsがObject、関数でステート利用
- 初期表示時
- 親でObjectを変更時
- 親でObjectの特定の要素を変更時
- 子でObjectを変更時
- 子でObjectの特定の要素を変更時
- depsなし
質問
下記処理が実行されるか、実行される場合は実行順番を答えよ
- 親の処理
- 親のuseMemoの処理
- 子の処理
- 子のuseMemoの処理
React.memo、useCallback、useState
ケース
- 親（ステートあり）と子（引数なし、React.memoなし）
- 親のステートがnumber型
- 初期表示時
- ステート値変更時
- 親のステートがnumber型の配列
- 初期表示時
- ステート配列を変更時
- ステート配列の要素を変更時
- 親のステートがObject
- 初期表示時
- ステートObjectを変更時
- ステートObjectの特定の要素を変更時
- 親のステートがnumber型
- 親（ステートあり）と子（引数なし、React.memoあり）で上記と同様
- 親（ステートあり、useCallback使わないの関数あり）と子（引数は関数、React.memoなし）
- 親のステートがnumber型、関数でステートを利用
- 初期表示時
- ステート値変更時
- 親のステートがnumber型の配列、関数でステートを利用
- 初期表示時
- ステート配列を変更時
- ステート配列の要素を変更時
- 親のステートがObject、関数でステートを利用
- 初期表示時
- ステートObjectを変更時
- ステートObjectの特定の要素を変更時
- 親のステートがnumber型、関数でステートを利用
- 親（ステートあり、useCallback使ったの関数あり）と子（引数は関数、React.memoなし）で上記と同様
- 親（ステートあり、useCallback使ったの関数あり）と子（引数は関数、React.memoあり）で上記と同様
- 親（ステートあり）と子（親のステートを引数にとる、React.memoなし）
- ステートがnumber型
- 初期表示時
- ステート値変更時
- ステートがnumber型の配列
- 初期表示時
- ステート配列を変更時
- ステート配列の要素を変更時
- ステートがObject
- 初期表示時
- ステートObjectを変更時
- ステートObjectの特定の要素を変更時
- ステートがnumber型
- 親（ステートあり）と子（親のステートを引数にとる、React.memoあり）で上記と同様
- 親（ステートあり）と子A（親のステートを引数にとる、React.memoなし）、子A（親のステートを引数にとる、React.memoなし）で上記と同様
- 親（ステートあり）と子A（親のステートを引数にとる、React.memoあり）、子A（親のステートを引数にとる、React.memoなし）で上記と同様
- 親（ステートあり）と子A（親のステートを引数にとる、React.memoあり）、子A（親のステートを引数にとる、React.memoあり）で上記と同様
質問
下記処理が実行されるか、実行される場合は実行順番を答えよ
- 親の処理
- 子の処理