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
93
Reactにおけるkeyの使い方について
社内LT会で発表したスライドです。
Reactではリストレンダリング以外にもkeyの使いどころがあるという話を中心にして、Reactのレンダリングプロセスを学ぶことの重要性を伝えたスライドです。
ken7253
January 22, 2024
Tweet
Share
More Decks by ken7253
See All by ken7253
カスタムHooksと単体テストの共通点について
ken7253
0
95
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
30
使いやすいツールチップを実装する方法
ken7253
0
46
テックブログ文豪への道
ken7253
0
35
関数型プログラミングの考え方を取り入れて予測しやすいコードを書く
ken7253
0
120
学び続けるための方法
ken7253
0
73
Other Decks in Programming
See All in Programming
Temporalを取り巻く仕様を整理する
sajikix
0
120
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
日付と正規化
megmogmog1965
0
140
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Jetpack for KMP
fornewid
1
290
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
Code Review Best Practice
trishagee
58
16k
Six Lessons from altMBA
skipperchong
24
3.2k
Optimizing for Happiness
mojombo
373
69k
Documentation Writing (for coders)
carmenintech
63
4.2k
Gamification - CAS2011
davidbonilla
78
4.9k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Building Adaptive Systems
keathley
34
2k
Scaling GitHub
holman
458
140k
4 Signs Your Business is Dying
shpigford
178
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
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はレンダリングの仕組みを知ることが大切