バラバラだった staleTime を、データの性質で4プリセットに集約する

Transcript

1. バラバラだった staleTime を、 データの性質で4プリセットに集約する 2026/07/17 React Tokyo ミートアップ #18 Dress Code株式会社 / 山口 祐司 1
2. 自己紹介 2
3. • 業務 ◦ プロダクトエンジニア・エンジニア採用・技術広報 • 経歴 ◦ 1987/12 埼玉県本庄市生まれ ◦ 2011/04 ソフトバンクモバイル株式会社 ◦ 2016/01 株式会社サイバーエージェント ◦ 2016/10 株式会社リクルートライフスタイル ◦ 2021/09 株式会社ラクス ◦ 2022/08 株式会社HRBrain ◦ 2025/07 Dress Code株式会社 • プライベート ◦ マンガ・アニメ・ゲーム・映画 ◦ 三児の父（中3, 中1, 年中） 自己紹介 山口 祐司 ぷーじ(@yug1224) 3
4. 会社紹介 4
5. CONFIDENTIAL | © Dress Code Inc . All rights reserved. 14.1億円　 資金調達を実施 Pre Seed&Seed Round 200+社 が利用中　 Number of companies Number of countries 5カ国 で事業を展開　 会社概要 Company Name / 会社名 Dress Code 株式会社 2024年9月　正式創業：2025年4月 47名 東京都中央区築地2-1-4 銀座PREX East 8F CEO / 代表取締役 Date of establishment / 設立年月 Location / 所在地 江尻 祐樹 Member / メンバー数 5
6. CONFIDENTIAL Copyright © DressCode Inc. All rights reserved. 6
7. AGENDA • オープニング • 課題・背景 • 4プリセット • 選び方とハマりどころ • ポーリングブースト • セッション境界 • まとめ 7
8. 同じ「5分キャッシュ」でも挙動が違う 8 • 「5分キャッシュ」と書いてあっても、画面ご とに書き方が違う • ある画面はタブに戻ると最新になるのに、別の 画面は古いまま • タブ復帰の再取得は、キャッシュが古くなった ときだけ動く • 一覧、詳細、集計、個人情報では設定を変える べきなのに、基準がない
9. データの性質で選ぶ 4 プリセット 9 • 「この画面は何分？」ではなく 「このデータはどんな性質？」で選ぶ ◦ list()：一覧向け、他の人の更新を少し遅れて拾う ◦ daily()：重い集計向け、当日中は取り直さなくてよい ◦ detail()：編集前の詳細向け、いつも最新がほしい ◦ confidential()：個人情報など、キャッシュに残したく ない • 全部一気に直さず、触った画面から少しずつ寄 せる ◦ 迷ったらまず list()
10. 迷ったら list()、daily() の誤用に注意 10 • キャッシュが「まだ新しい」判定だと、タブを 戻しても取り直さない • 同日中のバッチ結果をタブ復帰だけで拾いたい 画面に daily() だと、一日中取り直されない • タブを行き来しても画面が古いままなら、そう いう画面は list() • 日付が変わっても、開きっぱなしだと自動では 取り直されない • list() 以外にするときは、理由をはっきりさせ てから
11. Read Model は一時ポーリングで追う 11 • 保存が成功しても、画面用データは裏で作り直 されることがある • だから API が返っても、画面はまだ古いことが ある • キャッシュを捨てるだけでは、すぐ最新に追い つかない • そこで数十秒だけ、取り直し間隔を短くする ◦ ポーリングブースト • 終わったら普通の設定に戻し、ずっとポーリン グはしない
12. セッション境界では cancel してから clear 12 • まず Query Key に組織 ID を入れる ◦ テナントを混ぜない • 念のため、進行中の通信を止めてからキャッシュ を捨てる • ログアウト、組織切替、セッション切れで、同じ 手順に揃える • 組織を切り替えたら、次のログイン処理の前に キャッシュを消す
13. • 「何分キャッシュ？」ではなく「list か daily か」で話す • 裏で作り直すデータは、必要な間だけ短く追い かける • まず 3〜4 種類に分けて、直す画面から少しず つで十分効く • くわしくは Zenn 記事へ ◦ https://zenn.dev/dress_code/articles/78ce46997 dfe96 まとめ 13
14. 宣伝 14
15. 技術発信に力を入れています！！ 15 • ref: https://marmalade-aardwolf-939.notion.site/Dress-Code-2733844e68a3807e9719fba4f2bb0c9f ref: https://marmalade-aardwolf-939.notion.site/Dress-Code-Advent-Calendar-2026-07-e07f067a594f4401a707c2de1ba805b4
16. Thank you for your attention. We are Hiring! 16