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
170
Reactにおけるkeyの使い方について
社内LT会で発表したスライドです。
Reactではリストレンダリング以外にもkeyの使いどころがあるという話を中心にして、Reactのレンダリングプロセスを学ぶことの重要性を伝えたスライドです。
ken7253
January 22, 2024
Tweet
Share
More Decks by ken7253
See All by ken7253
CSS polyfill とその未来
ken7253
0
160
Browser and UI #2 HTML/ARIA
ken7253
2
210
PEPCは何を変えようとしていたのか
ken7253
3
430
Browser and UI #1 CSS
ken7253
0
96
レビューのやり方を(ちょっと)整理した話
ken7253
1
500
オーバーロード関数の話 @Mita.ts #2
ken7253
0
98
フロントエンドカンファレンス北海道参加レポート
ken7253
0
41
カスタムHooksと単体テストの共通点について
ken7253
0
380
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
55
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
670
NPOでのDevinの活用
codeforeveryone
0
870
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
240
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Designing for Performance
lara
610
69k
Practical Orchestrator
shlominoach
189
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Gamification - CAS2011
davidbonilla
81
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Invisible Side of Design
smashingmag
301
51k
Designing for humans not robots
tammielis
253
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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はレンダリングの仕組みを知ることが大切