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
16
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
300

Other Decks in Technology

See All in Technology
同じWAFが、攻撃の“形”は弾く── 正当な“形”の不正は通す
Avatar for kuroneko kuroneko13
0
260
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
190
Model Studio CLI × Token Plan
Avatar for 尾関将樹 | めい maigo999
0
200
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
24
430k
トークンマネジメントでAIにとって働きやすい環境を実現する
Avatar for hikae hikaruegashira
0
130
Oracle MCP Servers Explained
Avatar for thatjeffsmith thatjeffsmith
0
320
AI画像認識を活用したゲーム内決済処理検証の自動化
Avatar for gree_tech gree_tech
PRO
0
100
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
290
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
19k
Bits Agent Builder の⼊⾨と活⽤事例
Avatar for 株式会社ヌーラボ nulabinc
PRO
0
260
AI for Science時代を切り開く、政府の次世代HPC戦略の展望
Avatar for GPU UNITE gpuunite_official
0
130
도구에서 동료까지: 10년차 AI 스타트업의 AI 적응기
Avatar for Jeongkyu Shin inureyes
PRO
1
300

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
180
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
510
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
450

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!