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

The World's Most Expensive React Component and ...

Michael Chan
October 25, 2021
31

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

Michael Chan

October 25, 2021
Tweet

Transcript

  1. • 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
  2. • 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
  3. • 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
  4. • 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/
  5. 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
  6. 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
  7. “Tech Lead read a blog post on a performance enhancement

    and won’t merge a PR without it”
  8. “The energy required to re-frame the scope of the problem

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

    fi x it, no matter how hack-y, why woudn’t I?”
  10. 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?