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
140
Reactにおけるkeyの使い方について
社内LT会で発表したスライドです。
Reactではリストレンダリング以外にもkeyの使いどころがあるという話を中心にして、Reactのレンダリングプロセスを学ぶことの重要性を伝えたスライドです。
ken7253
January 22, 2024
Tweet
Share
More Decks by ken7253
See All by ken7253
レビューのやり方を(ちょっと)整理した話
ken7253
0
57
オーバーロード関数の話 @Mita.ts #2
ken7253
0
48
フロントエンドカンファレンス北海道参加レポート
ken7253
0
22
カスタムHooksと単体テストの共通点について
ken7253
0
280
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
39
使いやすいツールチップを実装する方法
ken7253
0
72
テックブログ文豪への道
ken7253
0
57
関数型プログラミングの考え方を取り入れて予測しやすいコードを書く
ken7253
0
140
学び続けるための方法
ken7253
0
120
Other Decks in Programming
See All in Programming
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
160
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
CloudflareStack でRAGに入門
asahiiwm
0
140
선언형 UI에서의 상태관리
l2hyunwoo
0
250
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.3k
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
230
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
390
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
110
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
200
103 Early Hints
sugi_0000
1
330
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
390
Featured
See All Featured
Fireside Chat
paigeccino
34
3.1k
Facilitating Awesome Meetings
lara
50
6.2k
Into the Great Unknown - MozCon
thekraken
34
1.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Become a Pro
speakerdeck
PRO
26
5.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Gamification - CAS2011
davidbonilla
80
5.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building an army of robots
kneath
302
44k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Visualization
eitanlees
146
15k
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はレンダリングの仕組みを知ることが大切