• ホーム
• React

カテゴリー：React

1. 05.30

   【React】「React Query」について

   React Queryとは？ 2020年2月にリリースされた。 リリースノート バージョンリリース日説明342022/4React18に対応した。suspenseなどと組み合わせる実装が増えてます。 SWR …

   • React
   • コメントを書く

2. 05.30

   【React】パフォーマンス改善対策、レンダリングの仕組みなど

   Reactのパフォーマンス改善対策には、主に2つあります。 1.サーバーからのデータ取得回数を減らす キャッシュをすることが重要。従来のuseContextやReduxはキャッシュのメカニズムを持っていない。 近年登場し…

   • React
   • コメントを書く

3. 05.23

   【React/Redux】「Redux Tool Kit」で非同期のSliceを作る場合、builderオブジェクト

   Reduxで非同期の場合のSliceの作り方は下記のようになります。 [crayon-68b34c3b4b227801042563/] createAsyncThunk 従来のreduxだとredux-thunkなどのミドルウェアで行…

   • React, Redux
   • コメントを書く

4. 05.04

   【React/Redux】「Redux Tool Kit」の導入（createSlice)

   インストール デフォルトでReactのアプリケーションと同時にRedux Tool Kitのテンプレートを導入できます。 [crayon-68b34c3b4bb52989844708/] 起動 [crayon-68b34c3b4bb…

   • React, Redux
   • コメントを書く

5. 05.02

   【React/Redux】よく使われるライブラリ一覧(redux-tool-kit、redux-form、reselectなど)

   全般 Redux Tool Kit Reduxの学習コストが高いことをみてReduxの開発チームが2019年10月にリリースしました。これを使うことで簡単にReduxを導入することが可能になります。 Redux Tool Kitの…

   • React, Redux
   • コメントを書く

6. 04.29

   【React】状態管理の選択肢（「Hooks」、「Redux」、「React Query」）

   Hooks メリット Reactの標準機能なので導入が楽。 useReducerのReducer関数は純粋なJavaScriptのコードなので単体テストが楽 デメリット 全てのReducerを一つのSt…

   • React, Redux
   • コメントを書く

7. 02.27

   【React】「useRef」の実践的な使い方

   特徴 値が更新されても差分検知されないこと。 よく使われるケース formでinput入力時のレンダリングを防ぐ目的で使われます。useRefを利用してレンダリングを抑えたライブラリが「react-hooks-form」です。 …

   • React
   • コメントを書く

8. 02.27

   【React】TypeScriptで用意されている型一覧

   関数コンポーネント（React.FC） Reactの関数コンポーネントの型になります。React.FunctionalComponentとも書けます。 例 [crayon-68b34c3b4ca30094479302/] 下…

   • React, TypeScript
   • コメントを書く

9. 02.20

   【React】「子コンポーネント」から「親コンポーネント」への値渡し

   stringの値を渡す。 useStateで定義した関数を子に渡して子から関数を呼べば親の状態も変更することができます。 親コンポーネント [crayon-68b34c3b4d2d0407088377/] 子コンポーネント [cr…

   • React
   • 3件のコメント

10. 02.14

    【Redux】「redux-saga」で非同期処理

    redux-sagaとは？ Reduxにタスクという概念を持ち込むためのライブラリです。Redux-sagaに依頼することで間接的にタスクを実行してくれます。 仕組み 非同期処理を別々のスレッド（タスク）のイベントループのように切り出…

    • React, Redux
    • コメントを書く