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

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
13
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
290

Other Decks in Technology

See All in Technology
『家族アルバム みてね』における インシデント対応との向き合い方 / Approach incident response in Family Album
Avatar for kohbis kohbis
2
230
イベントで大活躍する電子ペーパー名札 〜その３〜 / ビジュアルプログラミングIoTLT vol.23
Avatar for you（@youtoy） you
PRO
0
160
テストコードのないプロジェクトにテストを根付かせる
Avatar for Toru Takahashi tttol
0
210
TROCCOで始めるクラウドコストを民主化するためのFinOps
Avatar for Hiroki Takatsuka tk3fftk
1
250
類似画像検索モデルの開発ノウハウ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
990
A Harness for Behaviour: how to get AI to generate code that does what we intend, or "TDD in the age of AI"
Avatar for Matteo Vaccari xpmatteo
0
480
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
630
シンデレラなんかになりたくない！ガラスの靴が割れた時代にどう歩く？
Avatar for Nomizo Nomizo nomizone
0
210
GitHub Copilot CLI の Rubber Duck 機能を使ってコーディングの品質をあげよう #techbaton_findy
Avatar for すてにゃん stefafafan
2
1.2k
Python開発環境にハーネス適用を検討する
Avatar for yuuuka yuuka51
1
550
Geek Woman の育ち方 〜コミュニティとAIと〜
Avatar for chicaco chicaco
0
440
Claude Codeですべての日常業務を爆速化しよう！
Avatar for みのるん minorun365
PRO
16
15k

Featured

See All Featured
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
290
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
820
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
120
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
160
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
340
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k

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!