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
15
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
470
Hack FaaSter: Leveraging Docker and OpenFaaS for fun and offensive (security) profit
Avatar for Glenn 'devalias' Grant 0xdevalias
0
290

Other Decks in Technology

See All in Technology
AI時代のエンジニアキャリアについて今一度考える
Avatar for Sakamoto sakamoto_582
1
1.2k
金融の未来を考える / Thinking About the Future of Finance
Avatar for Kenji Saito ks91
PRO
0
150
Agentic AI 時代のテスト手法: Kiro とはじめるプロパティベーステスト (AWS Summit Japan 2026 | DEV212)
Avatar for Hiroki Yamazaki ymhiroki
0
210
AI Agent SaaS を支える自社仮想化基盤への挑戦と実運用 / ai-agent-saas-virtualization
Avatar for GMO Flatt Security flatt_security
2
1.6k
打造你的 AI 工作流：Agent Skill + MCP 實戰工作坊
Avatar for Bo-Yi Wu appleboy
0
670
どうして今サーバーサイドKotlinを選択したのか
Avatar for Nealle nealle
0
200
そのタスクオンスケですか？
Avatar for フクイ poropinai1966
0
140
Keeping applications secure by evolving OAuth 2.0 and OpenID Connect
Avatar for Alexander Schwartz ahus1
PRO
1
150
インフラ寄りSREでも 開発に踏み出せる〜境界を越えてユーザー体験に向き合いたい〜
Avatar for SansanTech sansantech
PRO
0
940
最近評価が難しくなった
Avatar for Mitsui maroon8021
0
240
Control Planeで育てるBtoB SaaSの認証基盤 - SRE NEXT 2026
Avatar for pokohide pokohide
1
370
Empower GenAI with Agile - あなたのアジャイルが生成AIのバフになる仕組み
Avatar for Hiroyuki Ito (TheHiro) hageyahhoo
0
130

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
490
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
1.9k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
270
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.6k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.5k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.4k
Between Models and Reality
Avatar for mayunak mayunak
4
360
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
500

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!