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

20190130 - React - displayName - Lightning Talk

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
490
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
CTO Night｜NotionのAIエージェントとFDE
Avatar for Kazuki Hayakawa kzkhykw1991
0
300
dbt Semantic Layerで進めるenechainのデータ民主化
Avatar for Aki Zhou akizhou
1
210
顧客価値を追いかけたら、プライシングにたどり着いた
Avatar for SansanTech sansantech
PRO
2
460
AI導入は済んだ。次は統制を作り替える番だ_AI×開発組織 Summit 2026
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
500
JAWS-UGグッズ職人仕事の流儀
Avatar for Hiroo Katoh kentapapa
0
130
Browser Spec: Testing Hotwire with Ruby
Avatar for Masayoshi Takahashi takahashim
1
160
DBについての基礎説明（MySQL編） - コロプラ 2026年度 新卒研修
Avatar for COLOPL Inc. colopl
0
160
macOS Golden Gate 時代のMac管理
Avatar for tategami tategami
0
130
AWS DevOps Agentはどこまで任せられるか 〜機能の現在地と、機能拡張の実践〜
Avatar for nyankotaro nyankotaro
0
120
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
150
Gemini Intelligence 入門 ― AppFunctions と Gemini Nano
Avatar for takuro abe takuroabe
0
350
AI時代のGraphQL
Avatar for joe_re joere
3
340

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
530
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
590
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
300
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
360
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.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!