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
Browser and UI #1 CSS
ken7253
0
32
レビューのやり方を(ちょっと)整理した話
ken7253
1
410
オーバーロード関数の話 @Mita.ts #2
ken7253
0
62
フロントエンドカンファレンス北海道参加レポート
ken7253
0
26
カスタムHooksと単体テストの共通点について
ken7253
0
320
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
40
使いやすいツールチップを実装する方法
ken7253
0
83
テックブログ文豪への道
ken7253
0
65
関数型プログラミングの考え方を取り入れて予測しやすいコードを書く
ken7253
0
150
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
150
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
870
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
バッチを作らなきゃとなったときに考えること
irof
2
460
ML.NETで始める機械学習
ymd65536
0
210
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
AIプログラミング雑キャッチアップ
yuheinakasaka
1
510
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
580
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Building an army of robots
kneath
303
45k
Designing for humans not robots
tammielis
250
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
The Invisible Side of Design
smashingmag
299
50k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Scaling GitHub
holman
459
140k
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はレンダリングの仕組みを知ることが大切