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.lazyとSuspenseで行うLazy Load
Search
camcam_lemon
May 27, 2019
Programming
2
510
React.lazyとSuspenseで行うLazy Load
React.js meetup #7 (LT会)での登壇資料です
camcam_lemon
May 27, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
66
iOSのキーボード入力ビューをカスタマイズする
lemon
0
240
視え方と文字の大きさ
lemon
1
400
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
280
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
980
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
テスト駆動Kaggle
isax1015
1
890
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
AI Ramen Fight
yusukebe
0
110
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
270
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
700
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
160
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Designing for humans not robots
tammielis
253
25k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Bash Introduction
62gerente
613
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Language of Interfaces
destraynor
158
25k
How to Ace a Technical Interview
jacobian
278
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Transcript
React.lazyとSuspenseで行う Lazy Load React.js meetup #7
None
React.lazyとSuspenseって? React 16.6から追加された非同期処理やLazy Load をサポートする機能 Suspense - ・・・dynamic importが完了するまで違う要素 を表示するコンポーネント
React.lazy - ・・・コンポーネントをdynamic importするAPI @loadable/component を使おう SSRには未対応 ただし... なので注意
従来のLazy Load
React.lazyとSusepense を使ってLazy Loadをする
React.lazyとSusepenseを使う
React.lazyとSusepenseを使う コンポーネントの外側で React.lazyでdynamic importする
React.lazyとSusepenseを使う fallback・・・ロード中に表示する要素 children・・・dynamic importする要素
めちゃくちゃ簡潔に書けるぞ!
もっと動的にdynamic import してみよう
やりたいこと 2 React.lazyとSuspenseを使うのは1回 3 ついでにbundleもわけよう 1 propsからimportする要素を決める
None
マウント時に1回だけReact.lazyでコンポーネント を取得するように処理を行う
undefinedにすると無限ループしてしまう depsには空配列を指定(必要であればprops)
webpackChunkNameに [request] を指定すると typeに対応するファイルを別にバンドルする
Formがnullの時があるので三項演算子で判定してから Suspenseを返すようにしている
まとめ 1 custom hooksによる責務の分離 2 可読性の向上 Hooksでより良い体験を propsによる動的かつ汎用的な操作 React.lazyとSuspenseの体験よき
ご静聴ありがとうございました!