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

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

Ad9e927bce4bd0519631296b5af7af83?s=47 Michael Chan
November 12, 2021
33

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

Ad9e927bce4bd0519631296b5af7af83?s=128

Michael Chan

November 12, 2021
Tweet

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 🧂☕🧪🌿