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
220
Reactにおけるkeyの使い方について
社内LT会で発表したスライドです。
Reactではリストレンダリング以外にもkeyの使いどころがあるという話を中心にして、Reactのレンダリングプロセスを学ぶことの重要性を伝えたスライドです。
ken7253
January 22, 2024
Tweet
Share
More Decks by ken7253
See All by ken7253
バンドルサイズを半減させた話 @Browser and UI #3
ken7253
0
2
CSS polyfill とその未来
ken7253
0
200
Browser and UI #2 HTML/ARIA
ken7253
2
290
PEPCは何を変えようとしていたのか
ken7253
3
470
Browser and UI #1 CSS
ken7253
0
130
レビューのやり方を(ちょっと)整理した話
ken7253
1
530
オーバーロード関数の話 @Mita.ts #2
ken7253
0
120
フロントエンドカンファレンス北海道参加レポート
ken7253
0
55
カスタムHooksと単体テストの共通点について
ken7253
0
410
Other Decks in Programming
See All in Programming
Le côté obscur des IA génératives
pascallemerrer
0
150
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
310
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
560
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
170
CSC509 Lecture 06
javiergs
PRO
0
260
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
260
CSC305 Lecture 06
javiergs
PRO
0
250
Catch Up: Go Style Guide Update
andpad
0
230
理論と実務のギャップを超える
eycjur
0
140
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
KATA
mclloyd
PRO
32
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fireside Chat
paigeccino
40
3.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
A designer walks into a library…
pauljervisheath
209
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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はレンダリングの仕組みを知ることが大切