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
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
270
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
AI時代、“平均値”ではいられない
Avatar for uhyo uhyo
8
2.6k
Retrospectiveを振り返ろう
Avatar for なかしょ nakasho
0
120
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
Avatar for hhiroshell hhiroshell
0
140
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
Avatar for Sansan R&D sansan_randd
0
220
QA業務を変える（！？）AIを併用した不具合分析の実践
Avatar for ma2ri__ ma2ri
0
150
OSSで50の競合と戦うためにやったこと
Avatar for yamadashy / やまだし yamadashy
3
1k
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
Avatar for Yao-Siang Su (蘇曜祥) yaosiang
0
190
様々なファイルシステム
Avatar for Satoru Takeuchi sat
PRO
0
250
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
Avatar for Makky makky_tyuyan
0
140
IBC 2025 動画技術関連レポート / IBC 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
2
190
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
Avatar for tenforward tenforward
1
130
Biz職でもDifyでできる！ 「触らないAIワークフロー」を実現する方法
Avatar for kanacan igarashikana
7
3.5k

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
640
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k

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!