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 (2.0)

Ad9e927bce4bd0519631296b5af7af83?s=47 Michael Chan
October 25, 2021
10

The World's Most Expensive React Component and How to Stop Writing it (2.0)

Version 2.0 was delivered at React Advanced on October 25, 2021. https://reactadvanced.com

Ad9e927bce4bd0519631296b5af7af83?s=128

Michael Chan

October 25, 2021
Tweet

Transcript

  1. The World’s Most Expensive React Component and How to Stop

    Writing It
  2. Close your eyes…

  3. Envision the most expensive React component you can…

  4. Got it?

  5. • Slow — too many renders • Ine ffi cient

    — too many paints • Heavy — takes too long to load • Unclear — design underperforms • Crufty — employs antiquated patterns • Unreliable — riddled with errors
  6. • Slow — too many renders • Ine ffi cient

    — too many paints • Heavy — takes too long to load • Unclear — design underperforms • Crufty — employs antiquated patterns • Unreliable — riddled with errors
  7. • Slow — too many renders • Ine ffi cient

    — too many paints • Heavy — takes too long to load • Unclear — design underperforms • Crufty — employs antiquated patterns • Unreliable — riddled with errors collaborative performance
  8. The time we gain or lose with design decisions collaborative

    performance
  9. The global side-e ff ects of bad design decisions collaborative

    performance
  10. Anatomy of the World’s Most Expensive React Component

  11. None
  12. • Michael Chan — call me any part of that

    • @chantastic many places • Frontend Architect for 4 years — mixed stack, product suite • Developing component-based design systems for 12 years • Host of React Podcast • React Working Group • Building Lunch Dev — a community of creators 
 at chan.dev/discord/
  13. None
  14. Back to it… What’s the most expensive React component

  15. https://en.wikipedi a .org/wiki/SOLID SOLID

  16. EXPENSIVE COMPONENT CHECKLIST • Closed to extension — it’s not

    easily composed with other components • Encapsulates the wrong things — it owns too much and does too little • Requires modi fi cation to be customized — it’s not adaptable • Directs folks to unsuccessful patterns — it’s misleading • Can’t be re-composed from smaller parts — it’s rigid TELL YOUR FRIENDS
  17. None
  18. ACTION!

  19. We’ve done a lot of work. 
 But what we

    accomplished?
  20. Too o ft en…

  21. We design components that are be dead ends not thru

    streets
  22. HOT TAKEAWAYS LIST • props considered harmful • you might

    not need a component • useComposition • no dead end components, only thru streets YOU SHOULD MAKE A LINT RULE
  23. Rules make us bad collaborators

  24. Throw the error

  25. Are you happy with the way your team works?

  26. Does the work feel harmonious, sustainable, and reliable?

  27. Are you o ft en tasked with reworking the same

    component?
  28. Are we realizing the full potential of component encapsulation and

    co-location?
  29. Are the patterns and practice we use productive?

  30. If not, why not?

  31. Why we don’t throw the error

  32. “I’m just doing what the linter tells me. It’s safer

    that way”
  33. “Refactoring is an acceptable form of procrastinating”

  34. “My imposter syndrome: demonstrating mastery of the patterns proves I’m

    competent”
  35. “Tech Lead read a blog post on a performance enhancement

    and won’t merge a PR without it”
  36. “I’m just try’n to be home by 5”

  37. “More complexity makes me feel more clever”

  38. “Fast fi xes are rewarded, slow solutions aren’t”

  39. “Cross-cutting solutions are arduous”

  40. “The energy required to re-frame the scope of the problem

    is a lot more energy than it takes push a patch”
  41. “I’m an engineer, not a manager. If I can just

    fi x it, no matter how hack-y, why woudn’t I?”
  42. “DRY DOGMA”

  43. “Criteria comes down. It doesn’t go up”

  44. “Shi ft le ft ? My company prefers three rights”

  45. The problem isn’t code, it’s communication

  46. Cycle of blame

  47. Seniors blame poorly educated juniors

  48. Juniors blame dogmatic seniors

  49. Managers blame timelines

  50. Leaders blame market conditions

  51. Corporations blame unreliable communities

  52. Communities blame stingy corporations

  53. Everyone has someone to blame and we all su ff

    er
  54. The rise of the component has forced us closer together

    than we’ve ever been before
  55. Component co-location increases collaboration costs

  56. What are you doing to help those below, above, and

    around you create a space where ego is low, e ffi ciency is high, and great collaboration as prized and rewarded?
  57. Stop making and re-making The Most Expensive Component In the

    World