Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

20190130 - React - displayName - Lightning Talk

Avatar for Glenn 'devalias' Grant Glenn 'devalias' Grant
January 30, 2019
Technology
19
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
310

Other Decks in Technology

See All in Technology
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
Avatar for taiki45 taiki45
2
570
AI駆動開発、viviONの1年 ── うまくいったこと・いかなかったこと
Avatar for viviON vivion
0
140
[2026-09-30]ロックンロールは鳴り止まないっ - 信頼性かまってちゃん - 「データ駆動を投げ捨ててまで。」追いかける信頼性改善に向けた取り組みの話
Avatar for tosite tosite
0
180
Codex概要
Avatar for Y.Miyado ymiya55
0
240
KanaAI
Avatar for shreyas shinde shreyas1009
0
140
キャリアLT今日までそして明日から
Avatar for Hiroo Katoh kentapapa
1
140
Account Factory for Terraformによる 標準化されたアカウント発行の自動化
Avatar for Ryosuke Tsuruda pensuke628
0
120
行動するAIのためのオントロジー ｜ DevRev — Encraft #26.pdf
Avatar for Takanori Suzuki dvrv_tknrszk
2
670
1人アドミンな私は AWSアカウント申請をSlackで完結したい！
Avatar for Yosuke Suzuki ysuzuki
0
110
覗いてみよう 関数型ビジュアル言語×2Dグラフィックスの世界
Avatar for Yohei Yamasaki yohyamasaki
0
160
AI感のないAWS構成図をAIエージェントに描かせたい！
Avatar for さご sagochiko
2
500
HacobuにおけるFDEとは/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
1
710

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
260
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
520
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
320
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
620
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
480
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
34k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
560
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
530
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380

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!