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
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
290
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.5k
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
200
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
100
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
590
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
Avatar for msysh msysh
3
150
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
270
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
390
生成AI時代にこそ求められるSRE / SRE for Gen AI era
Avatar for ymotongpoo ymotongpoo
5
2.7k
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
200
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
480

Featured

See All Featured
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Side Projects
Avatar for Sacha Greif sachag
455
43k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
140
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
880
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
62
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
100
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
120
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
64

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!