React Queryは非同期の状態管理ライブラリだ

by ytaisei

Slide 1

Slide 1 text

React Queryは非同期の状態管理ライブラリだ HRBrain 長期インターン　安井大晟

Slide 2

Slide 2 text

自己紹介 01. 02. 03. 04. 05. 状態管理の種類 Client State vs Server State 非同期の状態を管理するキャッシュを管理する Table of contents

Slide 3

Slide 3 text

自己紹介 01.

Slide 4

Slide 4 text

経歴 2019年　早稲田大学教育学部入学 2021年　42Tokyo入学　プログラミングを始める 2022年　技育展優秀賞 2022年　HRBrain長期インターン開始 2023年　春のJavaScript祭りLT登壇 2023年　社内Qiita Engineer Festa運営中

Slide 5

Slide 5 text

02. 状態管理の種類

Slide 6

Slide 6 text

Reactの状態には何種類ある？ Redux Context API Recoil jotai useState React Query SWR

Slide 7

Slide 7 text

A. 3種類

Slide 8

Slide 8 text

株式会社ナレッジワークよしこさんの記事をお借りします

Slide 9

Slide 9 text

Client State Global State Server State Reactの状態には3種類ある各Component内で管理される状態ページをまたいで保持し続ける必要のある状態サーバーデータのキャッシュ

Slide 10

Slide 10 text

Client State Global State Server State Reactの状態には3種類ある UIの状態トースト表示 APIレスポンス

Slide 11

Slide 11 text

Client State Global State Server State Reactの状態には3種類ある UIの状態トースト表示 APIレスポンスクライアントの状態サーバーの状態

Slide 12

Slide 12 text

本来、サーバーの状態はクライアントの状態と分けて管理されるべきである

Slide 13

Slide 13 text

Client State Global State Server State Reactの状態には3種類ある UIの状態トースト表示 APIレスポンスクライアントの状態サーバーの状態

Slide 14

Slide 14 text

Client State Global State Server Stateが存在しない UIの状態トースト表示 APIレスポンス

Slide 15

Slide 15 text

Redux

Slide 16

Slide 16 text

Client State Global State Server Stateが存在しない UIの状態トースト表示 APIレスポンス Reduxでは、 Server Stateを Global State として管理している

Slide 17

Slide 17 text

03. Client State vs Server State

Slide 18

Slide 18 text

Client StateとServer State の違いは？以後、Client State = Client State + Global State

Slide 19

Slide 19 text

Client State vs Server State Client State Server State 所有者クライアントが完全に所有しているリモートに操作されうる同期性同期的に使用することができる非同期的に使用する必要がある最新性常に最新の状態である状態が古くなる可能性がある

Slide 20

Slide 20 text

Slide 21

Slide 21 text

04. 非同期の状態を管理する

Slide 22

Slide 22 text

ReduxとReact Queryでの非同期な状態の実装を比較 loadingで検証

Slide 23

Slide 23 text

Reduxの場合

Slide 24

Slide 24 text

React Queryの場合

Slide 25

Slide 25 text

React Queryの場合

Slide 26

Slide 26 text

React Queryは非同期の状態管理ライブラリだ

Slide 27

Slide 27 text

05. キャッシュを管理する

Slide 28

Slide 28 text

Slide 29

Slide 29 text

状態をなるべく最新に保ちたい

Slide 30

Slide 30 text

useQueryを使用したデータフェッチの流れ 1. useQueryがコンポーネントで呼ばれ、データフェッチを開始 2. queryKeyを参考にキャッシュを確認する - キャッシュヒットした場合、キャッシュされたデータをコンポーネントに返却 - キャッシュヒットしなかった場合、または、キャッシュヒットしたがキャッシュが stale状態の場合は3に進む 3. バックグラウンドで新しいデータを fetchしてアップデートする 4. 新しいデータをキャッシュに保存して再レンダリングする

Slide 31

Slide 31 text

なるべくキャッシュを返してfetchを減らしたい

Slide 32

Slide 32 text

StaleTimeとcacheTime ● staleTime ○ キャッシュをstale（古くなったとみなす）状態にするまでの期間 ○ デフォルト：0 ● cacheTime ○ キャッシュをガベージコレクション（メモリ領域の開放）するまでの時間 ○ デフォルト：5分

Slide 33

Slide 33 text

StaleTimeを使用する ● staleTime：0 ○ 常に最新のデータを取得する ● staleTime：Infinity ○ キャッシュが常にfreshなのでネットワークのリクエストが走らず、キャッシュからデータを取得する ○ 自分しか変更できないデータに有効

Slide 34

Slide 34 text

StaleTimeを使用する ● staleTime：0 ○ 基本はこの設定で良い ● staleTime：Infinity ○ データが更新されるタイミングがわかっていれば Infinityにして、更新時に明示的にinvalidateする最新性を優先する

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Thanks!!!

Slide 37

Slide 37 text

Thanks!!! ● Twitter ○ https://twitter.com/ytaisei_ ● Qiita ○ https://qiita.com/taisei-13046 ● Zenn ○ https://zenn.dev/taisei_13046