Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Other Decks in Technology

See All in Technology
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
15k
Excelデータ分析で学ぶディメンショナルモデリング ～アジャイルデータモデリングへ向けて～ by @Kazaneya_PR / 20251126
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
3
630
その意思決定、まだ続けるんですか？ ~痛みを超えて未来を作る、AI時代の撤退とピボットの技術~
Avatar for Michiru Kato applism118
42
24k
GitHub を組織的に使いこなすために ソニーが実践した全社展開のプラクティス
Avatar for ソニー株式会社 sony
13
7.6k
学術的根拠から読み解くNotebookLMの音声活用法
Avatar for Shu Kobuchi shukob
0
500
社内外から"使ってもらえる"データ基盤を支えるアーキテクチャの秘訣/登壇資料（飯塚 大地・高橋 一貴）
Avatar for Hacobu hacobu
PRO
0
8.4k
経営から紐解くデータマネジメント
Avatar for Jun Ernesto Okumura pacocat
7
1.6k
[続・営業向け 誰でも話せるOCI セールストーク] AWSよりOCIの優位性が分からない編(2025年11月21日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
150
MAP-7thplaceSolution
Avatar for yukichi0403 yukichi0403
2
170
Symfony AI in Action
Avatar for Christopher Hertel el_stoffel
1
170
How native lazy objects will change Doctrine and Symfony forever
Avatar for Benjamin Eberlei beberlei
1
130
生成AIシステムとAIエージェントに関する性能や安全性の評価
Avatar for shibuiwilliam shibuiwilliam
2
250

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
59
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

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!