Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190130 - React - displayName - Lightning Talk

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Glenn 'devalias' Grant Glenn 'devalias' Grant
January 30, 2019
Technology
15
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
470
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
ガバメントクラウドでのランサムウェア対策
Avatar for 高橋広和 techniczna
0
290
データエンジニアこそ組織のオントロジーに向き合うべき — 問いに答えるAIから、事業を動かすAIへ
Avatar for harry gappy50
7
2.8k
Power Automateアップデート情報
Avatar for MiyakeMito miyakemito
0
290
BigQuery を検索ソースとした AI Agent の作り方って 〇〇 通りあんねん
Avatar for SatohJohn satohjohn
0
140
個人OSSが、机の上から世界に広がるまでの話
Avatar for Shinya Saita shinyasaita
0
140
AIがAPIを書く時代に、私たちは何を設計すべきか
Avatar for 草薙昭彦 nagix
0
170
オートマトンと字句解析でRoslynを読む
Avatar for tomokusaba tomokusaba
0
130
クラウドセキュリティ入門　～安全なクラウド利用のための基礎知識～
Avatar for LHazy lhazy
0
1.1k
plamo-3-translateの開発
Avatar for Preferred Networks pfn
PRO
0
220
20260608_Codexの可能性_ノンプログラマー向け_大城追記
Avatar for NobuakiOshiro doradora09
PRO
0
670
Escolhendo LLMs na Prática: Lições Reais em Busca Agêntica no Mercado Livre —TDC 2026 Floripa
Avatar for Jessica Pauli de C Bonson jpbonson
0
110
AI駆動開発は個人技からチーム戦へ：組織でAIを使いこなすための実践設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
350

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
41k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
420
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.7k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
160
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
250
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
430
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
430

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!