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
31
レビューのやり方を(ちょっと)整理した話
ken7253
0
400
オーバーロード関数の話 @Mita.ts #2
ken7253
0
62
フロントエンドカンファレンス北海道参加レポート
ken7253
0
26
カスタムHooksと単体テストの共通点について
ken7253
0
320
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
40
使いやすいツールチップを実装する方法
ken7253
0
83
テックブログ文豪への道
ken7253
0
64
関数型プログラミングの考え方を取り入れて予測しやすいコードを書く
ken7253
0
150
Other Decks in Programming
See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
ML.NETで始める機械学習
ymd65536
0
210
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
780
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
940
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
170
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
650
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
130
CI改善もDatadogとともに
taumu
0
170
WebDriver BiDiとは何なのか
yotahada3
1
150
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Why Our Code Smells
bkeepers
PRO
336
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
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はレンダリングの仕組みを知ることが大切