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

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
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/
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
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