なぜカスタムフックか
同じ 12 行が 2 つ有料プラン
React状態管理：カスタムフック・Context・Reducer
カスタムフック、フックのルール、Context、useContext、useReducer、Actionのunion型を扱う全21レッスンの状態管理コースです。fleamaの商品・フォーム・テーマ・ユーザー・カート状態を、再利用可能なロジックと予測可能な状態遷移へ整理します。
レッスン
21件
所要時間
約5.5時間
ランク
中級
最初のレッスンを読む
10分・登録なしで読めます
動く図解・なぜカスタムフックか
動く図解・なぜカスタムフックか
目標
fleamaのロジックと共有状態を、カスタムフック・Context・Reducerへ整理する
できるようになること
画面ロジックをカスタムフックへ抽出し再利用できる
Contextでテーマやユーザー情報を必要な部品へ共有できる
useReducerとActionのunion型で複雑な状態遷移を設計できる
前提知識・必要な環境
必須
- • TypeScriptでReactとAPIを扱う 修了相当
環境
ブラウザ完結（インストール不要）
このコースに入っているもの
触れる図解
15本
導入スライド
75枚
手を動かす演習
18問
理解度クイズ
3問
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
画面に散らばったロジックを自作フックへ抽出し、再利用できる層に分けます。
深いバケツリレーをやめ、テーマとユーザー情報をアプリ全体で共有します。
複雑になった更新処理をreducerへ集約し、カート機能を作り上げます。
このコースを終えると取れるバッジ
React 第6コース
0 / 21 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
次に学ぶなら
このコースを終えたあとに進むと、無理なく続けられます
