カテゴリー：React
-
【React/Redux】良い構成
09.10
共通関数 共通View向けの関数(stateのfilterなど） コンポーネントに直接記述するのではなく、以下の理由でRedux Tool KitのSliceの中に記述することが望ましいです。 各ビューで使いまわせるため。 これはそ…
-
【React】なぜイミュータブルが良いのか？
09.04
Reactでは、stateに副作用を与えて再描画することは許容されておらず常にイミュータブルにしておく必要があります。Reduxにおいても副作用による再レンダリングはできず、常にイミュータブルでないといけません。なぜでしょうか？ なぜイミ…
-
SWR とりあえず、Next.jsではこちらが推奨されている。 キーがAPIを実行するためのパラメータになっている。 戻り値でisLoadingがない デバッグツールはない。 React-Query …
-
ステータスを閲覧できるツール 「ReactQueryDevtools」というライブラリを使えば、React Queryによって今取得したデータがどのようなステータスになっているか確認できます。 また、このツールを使えば、React …
-
【React】APIへの非同期処理の書き方総論
07.25
Hooksでstate管理する場合 useEffectか、onClickのハンドラの中に非同期処理を置くのが普通です。 Reduxでstate管理する場合 redux-thunkだとaction-creatorが大きくなるので、少し複…
-
combineReducersとは？ ReduxのReducerは関心ごとごとに分割し、Reducerごとに別々の名前空間で処理が実行させることができるイメージ。 それらのReducerを統合する。 combineReducers…
-
【React】レンダリングの仕組み
07.24
Reactのレンダリングの流れ レンダーフェーズ ルートのコンポーネントから更新が必要なコンポーネントを見つけるために下方にループします。（更新が必要なコンポーネントはフラグが立っています。） 更新が必要なコンポーネントを…
-
【React】「HOC」について
07.24
HOC(Heigher-Order-Component)とは？ 高階コンポーネント コンポーネントを引数にとりコンポーネントを返す関数 react-reduxのconnect関数やReact.memoはHOCです。 …
-
今はHooksが使える時代なのであまりこの考え方はしないようになってきていますが、過去の案件のソースとかを読む場合に知っておくと良い概念かと思いましたので、まとめておきます。 Reduxを使うにあたってどのようにコンポーネントを分ける…
-
前提 「useMemoは値を返す。useCallbackは関数を返す。」という前提を押さえておくことが重要。 useMemo メモ化された値を返すフックです。計算結果を保持しそれを再利用する手法のこと。コンポーネントの再描画時の値の再…