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におけるkeyの使い方について
Search
ken7253
January 22, 2024
Programming
1
150
Reactにおけるkeyの使い方について
社内LT会で発表したスライドです。
Reactではリストレンダリング以外にもkeyの使いどころがあるという話を中心にして、Reactのレンダリングプロセスを学ぶことの重要性を伝えたスライドです。
ken7253
January 22, 2024
Tweet
Share
More Decks by ken7253
See All by ken7253
レビューのやり方を(ちょっと)整理した話
ken7253
0
68
オーバーロード関数の話 @Mita.ts #2
ken7253
0
61
フロントエンドカンファレンス北海道参加レポート
ken7253
0
26
カスタムHooksと単体テストの共通点について
ken7253
0
300
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
39
使いやすいツールチップを実装する方法
ken7253
0
82
テックブログ文豪への道
ken7253
0
61
関数型プログラミングの考え方を取り入れて予測しやすいコードを書く
ken7253
0
150
学び続けるための方法
ken7253
0
120
Other Decks in Programming
See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Rails アプリ地図考 Flush Cut
makicamel
1
110
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Unity Android XR入門
sakutama_11
0
140
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Featured
See All Featured
Bash Introduction
62gerente
610
210k
BBQ
matthewcrist
86
9.5k
Thoughts on Productivity
jonyablonski
69
4.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Invisible Side of Design
smashingmag
299
50k
Why Our Code Smells
bkeepers
PRO
335
57k
A Modern Web Designer's Workflow
chriscoyier
693
190k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Into the Great Unknown - MozCon
thekraken
35
1.6k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Rails Girls Zürich Keynote
gr2m
94
13k
Transcript
how to use "key" in React Reactにおけるkeyの効果的な使い方について
技術記事を書いたりするのが趣味。 最近はReactを使ったアプリケーションを書いています。 ユーザーインターフェイスやブラウザが好き。 https://github.com/ken7253 https://zenn.dev/ken7253 https://dairoku-studio.com ken7253 Frontend developer
Reactのkeyについて リストを map() とかでレンダリングするときに使う key について。 const list = ['リンゴ',
'バナナ', 'ゴリラ']; return ( <ul> { list.map((v) => <li key={v}>{v}</li>) } </ul> )
実際に起きた出来事 import { CheckList } from "../CheckList"; // 複数のチェックボックスを管理するコンポーネント type
Process = "before" | "after"; // 進行状況 export const App = () => { const [process, setProcess] = useState<Process>('before'); return ( <> { process === 'before' ? <CheckList label="開始前チェックリスト" /> // input[type="checkbox"]が複数並んだコンポーネント : <CheckList label="終了後チェックリスト" /> } <button onClick={ // クリックされた場合次のチェックリストに進む () => setProcess((prev) => prev === 'before' ? 'after' : 'before') } /> </> ) }
コンポーネントを切り替えたはずなのにチェック状態が維持されてしまう
コンポーネントを出し分ける部分の書き方に問題があった。 自分: CheckList コンポーネント自体を再レンダリングしてほしい React:差分のある CheckList[label] のみを更新します 問題があった箇所 { process
=== 'before' ? <CheckList label="開始前チェックリスト" /> // input[type="checkbox"]が複数並んだコンポーネント : <CheckList label="終了後チェックリスト" /> }
key を付けたら治った。 なぜ key を付けてみようと思ったのか Reactのレンダリングにおける差分検知の仕組みを知っていたから 個人的には対処療法のつもりだった 対処方法 { process
=== 'before' ? <CheckList key="before" label="開始前チェックリスト" /> // input[type="checkbox"]が複数並んだコンポーネント : <CheckList key="after" label="終了後チェックリスト" /> }
keyのもう一つの使い方 公式ドキュメントにも記載がある通り、同じようなコンポーネントを出し分ける場合に Stateをリセットする用途としても利用できる。 state の保持とリセット – React
Reactのレンダリングの仕組みについて
Reactのレンダリングの仕組みについて
Reactのレンダリングの仕組みについて
伝えたいこと key は識別子として使える Reactはレンダリングの仕組みを知ることが大切