Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Queryは非同期の状態管理ライブラリだ
Search
ytaisei
July 13, 2023
Technology
3
1.9k
React Queryは非同期の状態管理ライブラリだ
HRBrain Fly High #4 -Frontend-にて使用した資料
ytaisei
July 13, 2023
Tweet
Share
More Decks by ytaisei
See All by ytaisei
TanStack Routerを新規プロダクトで1年間運用してみた結果
ytaisei
1
110
Reactを段階的に覗いてみる
ytaisei
2
1.5k
Reactのトランジションを覗いてみる
ytaisei
1
1.9k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
180
React19で状態管理はどう変わるか
ytaisei
2
160
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.8k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
350
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.4k
Other Decks in Technology
See All in Technology
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
150
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Gamification - CAS2011
davidbonilla
81
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Navigating Team Friction
lara
187
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
React Queryは非同期の 状態管理ライブラリだ HRBrain 長期インターン 安井大晟
自己紹介 01. 02. 03. 04. 05. 状態管理の種類 Client State vs
Server State 非同期の状態を 管理する キャッシュを 管理する Table of contents
自己紹介 01.
経歴 2019年 早稲田大学教育学部入学 2021年 42Tokyo入学 プログラミングを始める 2022年 技育展優秀賞 2022年 HRBrain長期インターン開始 2023年 春のJavaScript祭りLT登壇 2023年 社内Qiita Engineer Festa運営中
02. 状態管理の種類
Reactの状態には 何種類ある? Redux Context API Recoil jotai useState React Query
SWR
A. 3種類
株式会社ナレッジワークよしこさんの 記事をお借りします
Client State Global State Server State Reactの状態には3種類ある 各Component内で 管理される状態 ページをまたいで
保持し続ける 必要のある状態 サーバーデータ のキャッシュ
Client State Global State Server State Reactの状態には3種類ある UIの状態 トースト表示 APIレスポンス
Client State Global State Server State Reactの状態には3種類ある UIの状態 トースト表示 APIレスポンス
クライアントの状態 サーバーの状態
本来、サーバーの状態は クライアントの状態と 分けて管理されるべきである
Client State Global State Server State Reactの状態には3種類ある UIの状態 トースト表示 APIレスポンス
クライアントの状態 サーバーの状態
Client State Global State Server Stateが存在しない UIの状態 トースト表示 APIレスポンス
Redux
Client State Global State Server Stateが存在しない UIの状態 トースト表示 APIレスポンス Reduxでは、
Server Stateを Global State として管理している
03. Client State vs Server State
Client StateとServer State の違いは? 以後、Client State = Client State +
Global State
Client State vs Server State Client State Server State 所有者
クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
Client State vs Server State Client State Server State 所有者
クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
04. 非同期の状態を管 理する
ReduxとReact Queryでの 非同期な状態の実装を比較 loadingで検証
Reduxの場合
React Queryの場合
React Queryの場合
React Queryは非同期の 状態管理ライブラリだ
05. キャッシュを 管理する
Client State vs Server State Client State Server State 所有者
クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
状態をなるべく 最新に保ちたい
useQueryを使用した データフェッチの流れ 1. useQueryがコンポーネントで呼ばれ、データフェッチを開始 2. queryKeyを参考にキャッシュを確認する - キャッシュヒットした場合、キャッシュされたデータをコンポーネントに返却 - キャッシュヒットしなかった場合、または、キャッシュヒットしたがキャッシュが
stale状態の場 合は3に進む 3. バックグラウンドで新しいデータを fetchしてアップデートする 4. 新しいデータをキャッシュに保存して再レンダリングする
なるべくキャッシュを 返してfetchを減らしたい
StaleTimeとcacheTime • staleTime ◦ キャッシュをstale(古くなったとみなす) 状態にするまでの期間 ◦ デフォルト:0 • cacheTime
◦ キャッシュをガベージコレクション(メモリ領域の開放)するまでの 時間 ◦ デフォルト:5分
StaleTimeを使用する • staleTime:0 ◦ 常に最新のデータを取得する • staleTime:Infinity ◦ キャッシュが常にfreshなのでネットワークのリクエストが走らず、 キャッシュからデータを取得する
◦ 自分しか変更できないデータに有効
StaleTimeを使用する • staleTime:0 ◦ 基本はこの設定で良い • staleTime:Infinity ◦ データが更新されるタイミングがわかっていれば Infinityにして、更新時に明示的にinvalidateする
最新性を優先する
Client State vs Server State Client State Server State 所有者
クライアントが完全に所有している リモートに操作されうる 同期性 同期的に使用することができる 非同期的に使用する必要がある 最新性 常に最新の状態である 状態が古くなる可能性がある
Thanks!!!
Thanks!!! • Twitter ◦ https://twitter.com/ytaisei_ • Qiita ◦ https://qiita.com/taisei-13046 •
Zenn ◦ https://zenn.dev/taisei_13046