Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190130 - React - displayName - Lightning Talk

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Glenn 'devalias' Grant Glenn 'devalias' Grant
January 30, 2019
Technology
17
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
480
Hack FaaSter: Leveraging Docker and OpenFaaS for fun and offensive (security) profit
Avatar for Glenn 'devalias' Grant 0xdevalias
0
300

Other Decks in Technology

See All in Technology
なぜSRE・セキュリティは評価されないのか？守りの組織を事業成長エンジンに変えた実践
Avatar for サイバーセキュリティクラウド cscengineer
PRO
3
2.3k
2026-09-04 SRE Tech Talk #15 怠惰なTerraform / Lazy Terraform
Avatar for SUZUKI Masashi masasuzu
0
230
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
140
振り返りこそエンジニアの本領
Avatar for Negima negima
0
340
日経電子版を支えていく Kasane Design System/fec_fukuoka
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
210
20260903 Tokyo Jazug Night #62 | Azure エンジニアよ、 その環境は本当にセキュアか？
Avatar for Olivia olivia_0707
1
640
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
Avatar for nade kazumanagano
0
190
Multica × 長期記憶：40個のミニプロジェクト管理
Avatar for eiei114 eiei114
1
210
Microsoft 365 Copilot chat -tekoälypalvelun tietosuojaongelmat
Avatar for Harto Pönkä hponka
0
550
module Synths; end
Avatar for あそなす asonas
1
130
GoCon2026 - Open Source, Open World
Avatar for sanposhiho sanposhiho
2
440
Nav2、Nav3 ... はたまた自作？〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
Avatar for Yuki Anzai yanzm
0
260

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.6k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
4
600
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k

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!