The Worlds Most Expensive React Component and How to Stop Writing It


We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React.


Hey there, all my friends at React Advanced. Thank you so much for attending this talk. Today we're going to talk about expensive React components, but probably not the type of expensive that you're accustomed to hearing about or thinking about. We're going to be talking about expensive API design, specifically a single component that I think probably costs us billions of dollars as an industry and is therefore the most expensive component that I've ever seen. And I want to show you how you can stop making that component on your teams and in your communities. Now, the next 19 minutes, this is what this talk is going to look like. We're going to talk a little bit about me, who I am, why I'm here. I'm going to share with you one of my favorite stories. And after that, we'll look at some code and try to make some takeaways from the relationship of the story to the code. So first things first, who am I? My name is Michael Chan. I go by any part of that. Michael, Chan, Chan, Michael Chan, whatever you like, whatever you're comfortable with. I go by Chantastic, most places on the internet that you might care about as a developer. I spent the last four years as a front end architect and the last 12 years in some form of design infrastructure role. So I'm really passionate about design and component design. I have hosted the show React Podcast. So if you're hearing my voice, but it sounds slower because it's not on 2X, that's me. I also have spent the last year and a half working with the React Working Group to help bridge the gap between React 17 and React 18 coming up. I am building a community, a Discord community. You can find it at slash Discord, where we just do a lot of stuff over lunch, a lot of lunch-based activities for us to learn from each other and learn new technologies. And finally, I recently joined the team at Chromatic, the company that makes Storybook. Our goal is to improve the UX of the web. And I wanted to invite you, if you were interested in working with me and the team there, check out slash Chromatic, and that'll get you to the right place. And I want to share one last link with you before we move on. That's slash expensive. There you'll find anything related to this talk, whether that be links or notes or this very presentation. And after this goes live, presumably a link to the YouTube video. Now, why am I here? Well, it's kind of an interesting question that starts a handful of years ago. I gave this talk a long time ago, three years or so ago, called Hot Garbage Clean Code is Dead. If you end up liking this talk, you'll probably love that one. If you don't like this talk, you'll hate that one. It was a really interesting journey because it started more as a technical presentation of things that I thought really didn't work, patterns that I thought didn't work well in complex applications. However, it slowly started to take shape as a personal journey as I learned kind of my own sense of belonging and overcoming imposter syndrome and just doing the work to overcome my demons. But I did feel like there was a little bit left unsaid, specifically around the cost of coordination, because coordination is costly. And while I did the work several years ago to understand where I was in my career, that work is happening kind of at different paces for different people. And it can make it really hard to coordinate. Now, now that we've established that, I want to tell you a story that really kind of changed the way that I think about how we make decisions in code. And it's giving me kind of like a fun example in my head to think about. I just want to share that with you. So let's dive in. Now, the story is this book called The Lady Who Put Salt in Her Coffee. Now it's super old timey. And unfortunately, as I was reading it again, it's very distractingly gendered, which makes me uncomfortable sharing it. With that and the hope that I don't violate and incorporate right laws in giving this talk, I decided that I would give an abridged and interpreted version of the story using emoji cats and kittens. So I've titled this the personified cat that put salt in its coffee. So the story goes like this. There's a cat and it's morning time and this cat makes a cup of coffee. Now it's just about to put some cream in this coffee when it realizes that instead of sugar, it has put salt in the coffee and salt is definitely not sugar when it comes to dressing up your cup of coffee. Now, fortunately, it had all of its kittens around. And so they all gather around and try to figure out what can be done to salvage this cup of coffee that now has salt inside of it. Now there was one kitten that had gone to college and was feeling very smart and said, you know, I went to college. I'm very smart kitten. And coffee is just chemistry. So we should consult a chemist. And of course, that kitten had gone to college and they all assumed it was very smart. So they agreed that they should first consult a chemist. So they go out to the chemist that I know, they find the chemist. And there is one thing that you should know about this chemist. This chemist is not a very good chemist. They've devoted most of their life to the pursuit of turning objects into gold, a pursuit that they have failed at dramatically. And at this very moment, they're trying to figure out ways to find more gold to conduct more experiments with. So at first, the chemist is like, I don't have time for this. I am very busy about my work. But the cats are very aristocratic cats and they have plenty of gold. So like, well, we'll give you the gold to figure out how we can salvage this cup of coffee. Of course, the chemist was in. So the chemist starts applying all of its science and chemistry and thinking everything that it knows to this cup of coffee. It has no idea how things are going to turn out, but it has a couple ideas of things that it could try. Unfortunately, when the chemist gives the cup of coffee back to the personified cat, well, it doesn't taste like salt anymore, which is a good thing, but it doesn't taste like coffee anymore either. Now that's actually good enough for the chemist. So they present their bill and walk off with the gold. Never to be seen again. Well, the cat's still sad. It has a cup of coffee with salt in it. And so the kittens reconvene to see what else can be done. Well, it's about this time that the collegiate kitten has another brilliant idea. Let's consult an herbologist. So they consult an herbologist. They go and they go into the woods and they find an herbologist whose house is just riddled with all of these beautiful spices and herbs and plants of all forms. Things that they'd never seen before. Now one thing that's interesting is that unlike the chemist, the herbologist didn't really care about money. But they did, they were a little prideful and felt misunderstood in their endeavor. And they had a great interest in sharing their passion and evangelizing the discipline. So they agreed to do the work. They come and they apply everything that they know about herbology to this cup of coffee, infusing it with new herbs and spices and things that nobody had ever heard of before. Unfortunately, this resulted in a cup of coffee that was just nauseating to all of the cats and the kittens. So it didn't taste like salt anymore, but it was also extremely disgusting. Of course, the arrogant herbologist blamed the coffee, saying that it was bewitched and moved on to share her good news with others who were less cursed. Now this left the kittens in a little bit of a lurk. They were at wit's end and the cat was getting cranky because it was fairly late in the day and it hadn't had its coffee yet. Now at this point, they reconvene a third time to see what might be the next possible step. This time, the collegiate kitten, feeling much more quiet and demure, giving room for the other two kittens to make their suggestions. And what they suggest is to consult with the wise and experienced neighbor next door. So they do. And the response of this wise and experienced neighbor is simply to ask, can't you make another cup of coffee? Now this was an extremely profound suggestion to all of these kittens who had been searching all day for a much more complicated way to salvage this cup of coffee. And they respond in delight. Why didn't we think of that? They cried. They made a new cup of coffee and the cat was happy. The end. Now, I know that we're, I'm on this side of the screen. We're an ocean away, probably. But I can feel your judgment about this story and possibly the way that it's ended, you know, because it's completely unrealistic, right? Nobody is so daft as to not realize that you fix salted coffee by just making another cup. Well, let's jump into some code. Now I want to show you the billion dollar component. The component that I have come to believe is the most expensive component and definitely disproportionately expensive that I've ever seen. So I'm going to show it to you now. Now you might have seen this because it exists exactly on the front page of the docs. Now I want to show you this in practice. I want to show you, I want to tell you not just that it is the most expensive component, but show you kind of some of the reasons why I believe that it is. And kind of go through this process with you. So I've put this inside of a code base as is, but using hooks because why does the front page of React.js still have classes on it? So our story starts with this request. Hey we'd like to improve the friendly factor of our greetings with customized punctuation. Our team tried to just add punctuation but failed. So not sure why. Now if we look at this component we see that it is a div, so that's unfortunate. It is going to fail any time that we try to put punctuation outside of that component. So we just need to add some new props with the default. We do that. We choose trailing punctuation as the prop name because we have been deeply hurt by things being too generic before. And we know that there may be some other punctuation questions later. So this looks good. We commit it and everyone's happy. We get another alert from the UX team. Hey, UX team here again. Great work on the last feature. Teams have already been using trailing punctuation, yada, yada, yada. We'd like to further customize the message with cute greetings like yo, howdy, what's good, you know, things of that nature. Can you help us? Well, yeah, actually, we can kind of repeat the same process that we did before using a new prop with a default. So that looks something like this. We'll just move what we had statically in there, move that up as a default, have a prop for it. We can change that. And then here we go. Easy peasy. We get another request. Our marketing team is creating videos and content reviewers concerned about the punctuation of the greeting on the dashboard. Instead of hey, Joan, it should have a comma. Is this something that we can easily fix? Yeah. And actually, because of the way that we made salutation, it's just kind of a coincidence, but you can fix this on your own. Just put a comma in there. Great. Don't even have to do anything with this. It's just checked off. So this one's interesting. We're collaborating with UX on a birthday bonanza project. Our goal is a one-time birthday balloons animation over the user's name. Give a little example here. But it uses a class name. I'm not going to read the whole thing. We just need to apply a class name. That's fine. So we go into our code. Should be pretty simple. In fact, there's actually a really well-known pattern for this. It's using object rest properties to pull off all of the attributes and then use JSX spread to put them onto the DOM element. So we do that. Pretty simple. Now we have another request, and this is kind of interesting. We might have been able to suspect that this is something that people would want to do eventually. But in our accessibility testing, we realized that we could have some low-hanging fruit that we could take advantage of by changing the HTML markup to be more semantic. So there's a question of how can we fix this now that we already have a component that just does a div? Well, we can actually do this in a non-breaking way with something that's really fun, a component prop. If you want to be really fancy and show off to all of your friends, you can use a more distinct and distinguished name, like the polymorphic as prop, which seems to be popular these days. Not too hard to implement. We use a little bit of fancy JavaScript renaming with our destructuring, and we're good to go. Now, we just started to come into some problems, though. We're starting to notice a few layout issues because greet message was used all over the place. But now that we can change the markup, we're starting to have some confusion around why it shifts the layout when we change that markup. Now, this is because we changed it so that we allowed people to make a div. This is kind of like this weird type of soft-breaking change. But we kind of press on, and we think, well, maybe we can just solve this with default props. We can add some default styles and then just kind of put those on the element. Unfortunately, that's not really good enough because sometimes someone might pass in these styles, but then they come in at such a high precedence, even when they don't pass in styles, that we kind of have a problem where it's always going to be display block, even if we want it to be display inline. So we can solve this with a little bit of delegation or inversion of control, some really cool computer science-y terms, making us feel really good about our choice to be front-end developers in 2021. And we do a bunch of fanciness to say that, well, if it's an object, we'll try to merge it with some defaults, but then otherwise we'll call it as a function, which is kind of funny. But it allows us to give the functionality that we want, provide the defaults, not break anything without actually creating a new API to opt out of those default styles. Now finally, with this request for internationalization, it's time that we start thinking about right to left. And so we have this new function that we can use and we can just use instead of having our own salutation, we can now process that by just giving the name to this function and then it will provide the message that we need. And so this is what our component looks like at the end of the day, after exhausting so many of the patterns that we use as React developers, whether that be delegation, component prop, or polymorphic as, if you like to call it that, defaults, destructuring assignment, all of these really cool things to make an extremely flexible and reusable component. But I'm left here wondering if we're not just doing what the cat and the kittens did to unsalt their salted cup of coffee. And if it's not satisfying to us because we're not following in the footsteps of the collegiate cat to just feel fancy in pursuing all of these things that make us feel knowledgeable. Infusing it with some new chemistry or herbs. When really we could have taken the path of asking our wise and knowledgeable neighbor, who might have suggested that at no point was any of this necessary, that choosing to use a component and props actually put us on a path where we were forced to solve some of these things that didn't actually need to be solved. Because all this time, we'd actually had these tools available to us and we were just recreating in our own terms things that we had available to us in JavaScript and HTML. We didn't need a component and we didn't need props. We just needed a function and markup. Now I have less than three minutes, I have like a minute and a half to finish up the uh, to try to make some takeaways from this. And my goal really isn't to tell you how to code, but to throw an error. I want to throw the error that this is actually not the hello world of React. There's a step below that we kind of missed in jumping right to components and props. And that going right to this step as like the first step of understanding React and React component has cost us as an industry so much money. And that every pattern that we have for props actually exists as a means to subvert using props in this kind of hysterical backwards way. And as I've talked with people about why this happens, I learned that it's really hard for us to throw these errors for a number of reasons. And the reasons that we don't throw them sound like this. I'm just doing what the linter tells me. It's safer that way. Refactoring is an acceptable form of procrastination. Demonstrating mastery of the patterns proves that I'm competent. Tech lead, read a blog on a pattern and won't merge without it. Most complexity makes, more complexity makes me feel more clever. Fast fixes are rewarded. Slow solutions aren't. I don't get paid more for collaboration. The energy required to reframe the scope of a problem is a lot more energy than it takes to push a patch. I'm an engineer, not a manager. If I can fix it, no matter how hacky, why wouldn't I? Try dogma and criteria comes down, but it doesn't go up. The problem isn't code. It's communication. We want people to see us as smart little kittens. The rise of the component has forced us to move closer together than we ever have before. And there's this immense organizational, cultural, and social tension that leads directly to the pain that we experience in working with and designing components. And I believe this problem is costing you. It's costing me and it's costing the companies that we work for and the communities that we support. And as I think about it, the only people that really win from all of this are consultants and educators. So we need to get better at asking the question, is the work we're doing the work that needs to be done? And specifically for us React developers, are props and components the right tool for the job that I have when children and functions exist? The basic building blocks that have always existed, you know, from HTML and JavaScript. Now only if we can do that, can we stop making and remaking the most expensive React component in the world. Hey, thanks so much for listening. Again, I'm Chantastic, and I hope this talk helps you think about the work that you're doing a little bit better. Thanks for listening. Bye bye.
23 min
25 Oct, 2021

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Workshops on related topic