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
9

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
290
Gophers, whales and.. clouds? Oh my!
Avatar for Glenn 'devalias' Grant 0xdevalias
0
450
Hack FaaSter: Leveraging Docker and OpenFaaS for fun and offensive (security) profit
Avatar for Glenn 'devalias' Grant 0xdevalias
0
270

Other Decks in Technology

See All in Technology
OCI技術資料 : OS管理ハブ 概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
2
4.3k
漸進的過負荷の原則
Avatar for SansanTech sansantech
PRO
3
420
3分でわかる！新機能 AWS Transform custom
Avatar for sato4mi sato4mi
1
260
Amazon ElastiCacheのコスト最適化を考える/Elasticache Cost Optimization
Avatar for quiver quiver
0
280
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
17k
re:Inventで見つけた「運用を捨てる」技術。
Avatar for shinji ezaki ezaki
1
160
Claude Codeベストプラクティスまとめ
Avatar for みのるん minorun365
52
29k
AI時代、1年目エンジニアの悩み
Avatar for JINYOUNG KIM jin4
1
120
re:Inventで出たインフラエンジニアが嬉しかったアップデート
Avatar for nagisa_53 nagisa53
4
220
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
350
「全社導入」は結果。1人の熱狂が組織に伝播したmikanのn8n活用
Avatar for Sota Mikami sota_mikami
0
580
Agentic Coding 実践ワークショップ
Avatar for watany watany
41
28k

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
150
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
300
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.3k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
610
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
50

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!