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
6

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

Other Decks in Technology

See All in Technology
手動からの解放！！Strands Agents で実現する総合テスト自動化
Avatar for 井手亮太 ideaws
3
410
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
Avatar for Yukinaga OISHI nyagasan
0
170
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
Avatar for Shunsuke Narita shunsukenarita
1
240
メモ整理が苦手な者による頑張らないObsidian活用術
Avatar for OPTiM optim
0
150
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
Avatar for ちょまど chomado
1
240
Kiro Hookを Terraformで検証
Avatar for ao-inoue ao_inoue
0
140
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
Avatar for you（@youtoy） you
PRO
3
710
激動の時代、新卒エンジニアはAIツールにどう向き合うか。　[LayerX Bet AI Day Countdown LT Day1 ツールの選択]
Avatar for tak tak848
0
610
会社もクラウドも違うけど​ 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
Avatar for AEON aeonpeople
2
400
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
Avatar for Cygames cygames
PRO
1
450
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
10
2.1k
隙間時間で爆速開発！ Claude Code × Vibe Coding で作るマニュアル自動生成サービス
Avatar for Akitomo Sato akitomonam
2
220

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
510
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k

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!