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
10
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
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
16k
猫でもわかるKiro CLI(CDKコーディング編)
Avatar for Hiroo Katoh kentapapa
1
110
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.4k
明日からドヤれる！超マニアックなAWSセキュリティTips10連発 / 10 Ultra-Niche AWS Security Tips
Avatar for Yuji Oshima yuj1osm
0
470
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」ご紹介資料
Avatar for Sho Nakatani laysakura
0
2.2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
非エンジニア職からZOZOへ 〜登壇がキャリアに与えた影響〜
Avatar for ikechi penpeen
0
460
DevOpsDays2026 Tokyo Cross-border practices to connect "safety" and "DX" in healthcare
Avatar for Yutaro Sugai hokkai7go
0
150
インフラを Excel 管理していた組織が 3 ヶ月で IaC 化されるまで
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
3
190
DevOpsDays Tokyo 2026 軽量な仕様書と新たなDORA AI ケイパビリティで実現する、動くソフトウェアを中心とした開発ライフサイクル / DevOpsDays Tokyo 2026
Avatar for Niishi Kubo n11sh1
0
130
ある製造業の会社全体のAI化に1エンジニアが挑んだ話
Avatar for 北見海貴 kitami
2
980
最近の技術系の話題で気になったもの色々（IoT系以外も） / IoTLT 花見予定会（たぶんBBQ） @都立潮風公園バーベキュー広場
Avatar for you（@youtoy） you
PRO
1
170

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
170
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
810
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
250
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
160
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
570
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
180
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
690

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!