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
50
Reactにおけるkeyの使い方について
社内LT会で発表したスライドです。
Reactではリストレンダリング以外にもkeyの使いどころがあるという話を中心にして、Reactのレンダリングプロセスを学ぶことの重要性を伝えたスライドです。
ken7253
January 22, 2024
Tweet
Share
More Decks by ken7253
See All by ken7253
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
21
使いやすいツールチップを実装する方法
ken7253
0
31
テックブログ文豪への道
ken7253
0
27
関数型プログラミングの考え方を取り入れて予測しやすいコードを書く
ken7253
0
83
学び続けるための方法
ken7253
0
62
Other Decks in Programming
See All in Programming
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.9k
Going beyond Apache Parquet's default settings
xhochy
0
140
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Domain-Driven Transformation
hschwentner
2
1.5k
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
570
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
200
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
400
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.1k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Unsuck your backbone
ammeep
664
57k
Designing with Data
zakiwarfel
96
4.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Navigating Team Friction
lara
179
13k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Happy Clients
brianwarren
92
6.4k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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はレンダリングの仕組みを知ることが大切