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
94
レビューのやり方を(ちょっと)整理した話
ken7253
1
500
オーバーロード関数の話 @Mita.ts #2
ken7253
0
96
フロントエンドカンファレンス北海道参加レポート
ken7253
0
40
カスタムHooksと単体テストの共通点について
ken7253
0
370
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
53
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
0
180
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
Select API from Kotlin Coroutine
jmatsu
1
230
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
5つのアンチパターンから学ぶLT設計
narihara
1
160
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
GraphRAGの仕組みまるわかり
tosuri13
8
530
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
64
20k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
760
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
The Invisible Side of Design
smashingmag
301
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
160
23k
Site-Speed That Sticks
csswizardry
10
680
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Designing for humans not robots
tammielis
253
25k
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はレンダリングの仕組みを知ることが大切