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
6

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
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
Avatar for emi emiki
0
240
ウォンテッドリーのアラート設計と Datadog 移行での知見
Avatar for Kazuki Obata donkomura
0
130
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
Avatar for たけのこ kmiya84377
1
160
20250807_Kiroと私の反省会
Avatar for Rika.I riz3f7
0
260
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを 愛するようになったか（改）
Avatar for Takaya Saeki nullpo_head
7
2.7k
Engineering Failure-Resilient Systems
Avatar for Mark Irozuru infraplumber0
0
130
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
Avatar for vaaaaanquish vaaaaanquish
34
16k
20250807 Applied Engineer Open House
Avatar for Sakana AI sakana_ai
PRO
2
580
プロダクトエンジニアリングで開発の楽しさを拡張する話
Avatar for sagawa / barometrica barometrica
0
210
Amazon GuardDuty での脅威検出：脅威検出の実例から学ぶ
Avatar for KintoTech_Dev kintotechdev
0
130
AWS DDoS攻撃防御の最前線
Avatar for R.Kondo ryutakondo
1
180
Cloud WANの基礎から応用～少しだけDeep Dive～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
120

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
770
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
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!