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
実装で解き明かす並行処理の歴史
Avatar for ZOZO Developers zozotech
PRO
1
420
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
11
77k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
Green Tea Garbage Collector の今
Avatar for zchee zchee
PRO
2
390
M5製品で作るポン置きセルラー対応カメラ
Avatar for Hisaya OKADA sayacom
0
160
Escaping_the_Kraken_-_October_2025.pdf
Avatar for Maarten Dalmijn mdalmijn
0
140
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
Avatar for Hiromu Shioya kwappa
3
280
リーダーになったら未来を語れるようになろう/Speak the Future
Avatar for Genki Sano sanogemaru
0
280
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
320
AWSにおけるTrend Vision Oneの効果について
Avatar for shima shimak
0
130
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
Avatar for maroon1st maroon1st
0
190
いまさら聞けない ABテスト入門
Avatar for 木村彩恵（skmr2348） skmr2348
1
210

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
850
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
960
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Done Done
Avatar for chrislema chrislema
185
16k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
40k
KATA
Avatar for Megan Lloyd mclloyd
32
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k

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!