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

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 has probably cost us billions of dollars as an industry and is therefore the most expensive component that I've ever seen. I want to show you how you can stop making that component on your teams and in your communities.

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.

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've 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 Chan.Dev.Discord, where we 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. I wanted to invite you, if you're interested in working with me and the team there, check out chan.dev.chromatic. And that'll get you to the right place.

Now, I want to share one last link with you before we move on. That's chan.dev.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 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 a fun example in my head to think about, and 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. Um, with that, and the hope that I don't violate and incorporate right laws in giving this talk, I decided that I would give a 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 kid 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, the kid 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 they 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 experiments with. 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. He's 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 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 reconvened 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 end 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, you know, 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 ReactJS.org docs. Now I want to show you this in practice. 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. 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. We know that there may be some other punctuation questions later. So this looks good. We commit it and everyone's happy. We had 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.

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 and 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. 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 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 like 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.

Or if you want to be really fancy and show off to all of your friends you can use a more you know 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 start 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 well 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 and 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. Well you know 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 in line. So we can solve this with a little bit of delegation or inversion of control some really cool computer sciency 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 you know 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 you know 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 you know 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 you know 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 the patterns that we use as react developers whether that be you know delegation component prop poly 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 cats 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 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 to try to make some takeaways from this. My goal really isn't to tell you how to code but to throw an error. I want to throw the air 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 And as I've talked with people about why this happens, I've 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't, 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 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.