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
0
7

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
Tweet

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
270
Gophers, whales and.. clouds? Oh my!
Avatar for Glenn 'devalias' Grant 0xdevalias
0
430
Hack FaaSter: Leveraging Docker and OpenFaaS for fun and offensive (security) profit
Avatar for Glenn 'devalias' Grant 0xdevalias
0
250

Other Decks in Technology

See All in Technology
KMP の Swift export
Avatar for Koki Hirokawa kokihirokawa
0
330
いま注目しているデータエンジニアリングの論点
Avatar for Ikki Miyazaki ikkimiyazaki
0
590
空間を設計する力を考える / 20251004 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
330
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
Avatar for GMO Flatt Security flatt_security
7
1.8k
ACA でMAGI システムを社内で展開しようとした話
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
250
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
1.9k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
2
5.4k
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
Avatar for moriyuya moriyuya
4
520
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
Avatar for どすこい daisuketakeda
2
100
VCC 2025 Write-up
Avatar for bata_24 bata_24
0
180
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9k
Where will it converge?
Avatar for Ibukun Adedeji ibknadedeji
0
180

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
2.6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k

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!