Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190130 - React - displayName - Lightning Talk

Avatar for Glenn 'devalias' Grant Glenn 'devalias' Grant
January 30, 2019
Technology
13
0

20190130 - React - displayName - Lightning Talk

A lightning talk I gave in 2019 on React displayName usage.

Avatar for Glenn 'devalias' Grant

Glenn 'devalias' Grant

January 30, 2019

More Decks by Glenn 'devalias' Grant

See All by Glenn 'devalias' Grant
Bug Bounty Hunting on Steroids [DEF CON 26]
Avatar for Glenn 'devalias' Grant 0xdevalias
0
300
Gophers, whales and.. clouds? Oh my!
Avatar for Glenn 'devalias' Grant 0xdevalias
0
460
Hack FaaSter: Leveraging Docker and OpenFaaS for fun and offensive (security) profit
Avatar for Glenn 'devalias' Grant 0xdevalias
0
280

Other Decks in Technology

See All in Technology
要件定義の精度を高めるための型と生成AIの活用 / Using Types and Generative AI to Improve the Accuracy of Requirements Definition
Avatar for haru860 haru860
0
290
AIと乗り切った1,500ページ超のヘルプサイト基盤刷新とさらにその先の話
Avatar for mugi / Hajime Mugishima mugi_uno
2
300
ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する
Avatar for did0es shuta13
3
280
（きっとたぶん）人材育成や教育のような何かの話
Avatar for Takanori Sejima sejima
0
590
サービスの信頼性を高めるため、形骸化した「プロダクションミーティング」を立て直すまでの取り組み
Avatar for すてにゃん stefafafan
1
230
AI時代に越境し、 組織を変えるQAスキルの正体 / QA Skills for Transforming an Organization
Avatar for miisan mii3king
5
3.8k
ボトムアップの改善の火を灯し続けろ！〜支援現場で学んだ、消えないための3つの打ち手〜 / 20260509 Kazuki Mori
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
530
MySQL 9.7がやってきた ～これまでのあらすじと基本情報～ @ 日本MySQLユーザ会会2026年04月 / mysql97-yattekita
Avatar for sakaik sakaik
0
170
AIが盛んな時代に 技術記事を書き始めて起きた私の中での小さな変化
Avatar for 松尾淳平 peintangos
0
350
世界の中心でApp Runnerを叫ぶ FINAL
Avatar for つくぼし tsukuboshi
0
230
【技術書典20】OpenFOAM（自宅で深める流体解析）流れと熱移動（２）
Avatar for kamakiri1225 kamakiri1225
0
370
Agent Skillsで実現する記憶領域の運用とその後
Avatar for yamadashy / やまだし yamadashy
1
330

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
460
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
160
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.1k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
540

Transcript

  1. React: displayName Because trying to debug a nest of Unknown

    components is kind of meh..

  2. Functional Components

  3. React 16.6 https://reactjs.org/blog/2018/10/23/react-v-16-6.html

  4. React.memo Like React.PureComponent, but functional! https://reactjs.org/docs/react-api.html#reactmemo

  5. Memoized Functional Components

  6. React Developer Tools

  7. Memo -> Memo -> Unknown -> WTF?

  8. displayName? https://reactjs.org/docs/react-component.html#displayname

  9. Maybe not..? ES6 ‘Fat Arrow’ anonymous function Named function

  10. Wrapping Display Name https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-fo r-easy-debugging

  11. memoWithDisplayName app/javascript/src/shared/react-helpers.js

  12. memoWithDisplayName

  13. Components.. withDisplayName(s)!

  14. But how do I know when I need it?

  15. But how do I know when I need it?

  16. But how do I know when I need it? ESLint

  17. ESLint: react/display-name https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

  18. Thank you!