The World's Most Expensive React Component and How to Stop Writing It v2.1

v2.1 of this talk was React India on November 12th 2021. https://www.reactindia.io

Transcript

1. chan.dev/expensive The World’s Most Expensive React Component and How to Stop Writing It v2
2. chan.dev/expensive The next 25 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
3. chan.dev/expensive The next 19 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
4. chan.dev/expensive The next 19 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
5. chan.dev/expensive The next 19 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
6. chan.dev/expensive The next 19 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
7. chan.dev/expensive
8. chan.dev/expensive • Michael Chan
9. chan.dev/expensive • Michael Chan • @chantastic
10. chan.dev/expensive • Michael Chan • @chantastic • Frontend Architecture and Design Ifra.
11. chan.dev/expensive • Michael Chan • @chantastic • Frontend Architecture and Design Ifra. • Host of React Podcast
12. chan.dev/expensive • Michael Chan • @chantastic • Frontend Architecture and Design Ifra. • Host of React Podcast • React Working Group
13. chan.dev/expensive • Michael Chan • @chantastic • Frontend Architecture and Design Ifra. • Host of React Podcast • React Working Group • Building Lunch Dev at chan.dev/discord/
14. chan.dev/expensive • Michael Chan • @chantastic • Frontend Architecture and Design Ifra. • Host of React Podcast • React Working Group • Building Lunch Dev at chan.dev/discord/ • Recently joined Chromatic to improve the UX of the web
15. chan.dev/expensive • Michael Chan • @chantastic • Frontend Architecture and Design Ifra. • Host of React Podcast • React Working Group • Building Lunch Dev at chan.dev/discord/ • Recently joined Chromatic to improve the UX of the web Hiring ch a n.dev/chrom a tic
16. chan.dev/expensive chan.dev/expensive
17. chan.dev/expensive Why am I here?
18. chan.dev/expensive
19. chan.dev/expensive Coordination is Costly
20. chan.dev/expensive The next 23 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
21. chan.dev/expensive
22. chan.dev/expensive 😺 The Personi fi ed Cat that Put Salt in its Co ff ee 🐱 🐱 🐱 🐱 🐱 🐱 ☕
23. chan.dev/expensive 😺🧂☕ The Personi fi ed Cat that Put Salt in its Co ff ee
24. chan.dev/expensive 😺☕
25. chan.dev/expensive 😺🥛☕
26. chan.dev/expensive 😿🧂☕
27. chan.dev/expensive 😿🧂☕🐈🐈🐈
28. chan.dev/expensive 🐈🎓💡
29. chan.dev/expensive 🧑🔬
30. chan.dev/expensive 🧑🔬 🚫
31. chan.dev/expensive 🧑🔬🙅
32. chan.dev/expensive 🐈🐈🐈👑
33. chan.dev/expensive 🧑🔬🤑
34. chan.dev/expensive 🧑🔬🧪☕
35. chan.dev/expensive 😿🧂☕
36. chan.dev/expensive 😿🧂☕ 🚫
37. chan.dev/expensive 😿🧂☕ 🚫 🚫
38. chan.dev/expensive 🧑🔬🧾
39. chan.dev/expensive 😿🧂☕🐈🐈🐈
40. chan.dev/expensive 🐈🎓💡
41. chan.dev/expensive 🧑🌾
42. chan.dev/expensive 🧑🌾🤑 🚫
43. chan.dev/expensive 🧑🌾📚
44. chan.dev/expensive 🧑🌾🌿☕
45. chan.dev/expensive 🐈🐈🐈😿☕
46. chan.dev/expensive 🐈🐈🐈😿☕ 🤢 🤢 🤢 🤢
47. chan.dev/expensive 😿🧂☕ 🚫 🤢
48. chan.dev/expensive 🧑🌾☕ 👹
49. chan.dev/expensive 🐈🐈🐈😿☕ 😖 😖 😖 😡
50. chan.dev/expensive 🐈🐈🐈😿☕ 😖 😖 😖 😡
51. chan.dev/expensive 🐈⬛
52. chan.dev/expensive 🐈⬛ 🤨
53. chan.dev/expensive 🐈🐈🐈😿☕ 🤯 🤯 🤯 🤯
54. chan.dev/expensive 😺☕
55. chan.dev/expensive The end
56. chan.dev/expensive (hold that thought)
57. chan.dev/expensive The next 17 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
58. chan.dev/expensive
59. chan.dev/expensive
60. chan.dev/expensive
61. chan.dev/expensive
62. chan.dev/expensive Solution: new prop w/default
63. chan.dev/expensive
64. chan.dev/expensive
65. chan.dev/expensive
66. chan.dev/expensive Solution: new prop w/default
67. chan.dev/expensive
68. chan.dev/expensive
69. chan.dev/expensive 👍
70. chan.dev/expensive
71. chan.dev/expensive
72. chan.dev/expensive Solution: object rest properties and JSX spread attributes
73. chan.dev/expensive
74. chan.dev/expensive
75. chan.dev/expensive
76. chan.dev/expensive Solution: component prop (or polymorhic as prop)
77. chan.dev/expensive
78. chan.dev/expensive
79. chan.dev/expensive
80. chan.dev/expensive Solution: default props
81. chan.dev/expensive
82. chan.dev/expensive Solution: delegation (or inversion of control)
83. chan.dev/expensive
84. chan.dev/expensive
85. chan.dev/expensive Solution: use a function
86. chan.dev/expensive
87. chan.dev/expensive 😿🧂☕🐈🐈🐈
88. chan.dev/expensive 😿🧂☕🐈🐈🐈 🎓💡
89. chan.dev/expensive 😿🧂☕🐈🐈🐈 🎓💡 🧑🔬🧪
90. chan.dev/expensive 😿🧂☕🐈🐈🐈 🎓💡 🧑🔬🧪 🧑🌾🌿
91. chan.dev/expensive 😿🧂☕🐈🐈🐈 🎓💡 🧑🔬🧪 🧑🌾🌿 🐈⬛
92. chan.dev/expensive 🐈⬛
93. chan.dev/expensive 🐈⬛ 🧂☕🧪🌿
94. chan.dev/expensive 🐈⬛ ☕ 🧂☕🧪🌿
95. chan.dev/expensive The next 5 minutes of your life • 🤳 About me • 📖 A story • 💾 Some code • 🤔 The takeaway
96. chan.dev/expensive Throw the error
97. chan.dev/expensive
98. chan.dev/expensive But we don’t throw…
99. chan.dev/expensive Reasons we don’t throw
100. chan.dev/expensive “I’m just doing what the linter tells me. It’s safer that way”
101. chan.dev/expensive “Refactoring is an acceptable form of procrastinating”
102. chan.dev/expensive “demonstrating mastery of the patterns proves I’m competent”
103. chan.dev/expensive “Tech Lead read a blog post on a pattern and won’t merge a PR without it”
104. chan.dev/expensive “More complexity makes me feel more clever”
105. chan.dev/expensive “Fast fi xes are rewarded. Slow solutions aren’t”
106. chan.dev/expensive “I don’t get paid more for collaboration”
107. chan.dev/expensive “The energy required to re-frame the scope of the problem is a lot more energy than it takes push a patch”
108. chan.dev/expensive “I’m an engineer, not a manager. If I can just fi x it, no matter how hack-y, why wouldn’t I?”
109. chan.dev/expensive “DRY DOGMA”
110. chan.dev/expensive “Criteria comes down. It doesn’t go up”
111. chan.dev/expensive The problem is communication note code
112. chan.dev/expensive We want people to see us as smart little kittens 🐈 🎓💡
113. chan.dev/expensive The rise of the component has forced us closer together than we’ve ever been before
114. chan.dev/expensive Consultants and educators are the only ones who win 🧑🔬🧪 🧑🌾🌿 💸 📈
115. chan.dev/expensive Is the work we’re doing the work that needs to be done? 🐈⬛
116. chan.dev/expensive ☕ 🧂☕🧪🌿 🐈⬛
117. chan.dev/expensive Stop making and re-making The Most Expensive React Component In the World 🧂☕🧪🌿