CSS Is More Powerful Than You Think! Building React Search in CSS

Hello, everybody. My name is Evatar Alush. I'm a software engineer at Meta. I'm the author of several open source packages. Very much passionate about open source, API design, and building tools for other developers. I live in Tel Aviv with my beautiful wife. And I'm also the humble servant of this mighty creature.

Today, I'm going to step just a little bit outside of my comfort zone because while I usually talk about JavaScript, TypeScript, Node, building packages, React, today I'm going to talk about something different. I'm going to talk about CSS. And more specifically about how I solved actual challenges in React using only CSS.

You see, one of the main packages that I maintain is EmojiPicker React, which is one of the most popular EmojiPicker components in React or in general, actually, with hundreds of thousands of weekly downloads. And it has most of the features you would expect from a standard EmojiPicker. So it has the entire set of emojis. It has different skin tones that you can pick from. It has different styles of emojis. So you got Apple, Twitter, Google, and Facebook. And it also has searching capability. And I'll type something and you can pretty easily see that the search is quite snappy. It appears immediately. The search results appear immediately. And, well, that's what you would expect from a search component in an EmojiPicker.

But it wasn't always the case. You see, when I created the EmojiPicker back in 2017, the search capability was quite slow. And the main issue that I would always get in the GitHub page of the project was, search is laggy. We cannot use search. It takes up to two seconds to search anything. And that's not acceptable. And I managed to fix it, mostly using CSS. And before I show you how I did it, I want to show you what it felt like before actually implementing the fix. So I'll go back to the demo component that I created.

And this is the EmojiPicker without that fix. So just the way it was before. And I'll type something and you'll notice a slight lag. So I'm typing the letter K now. And it took, I don't know, like half a second to re-render. And, well, not that bad, you would say. But if it happens for each of the keystrokes, that's not comfortable.

And I'm using actually a very high-end MacBook Pro, but what about actual users in the wild who do not have high-end machines? Let's see what it feels for them. So let's go to the Performance tab in Chrome DevTools and let's try to slow it down, say at time six. And let's see what this feels like for users in the wild. So I'll let you know when I actually type something so you can time it yourself. So I'm typing the letter K now. And that took almost, I don't know, two seconds to actually see anything updating. And obviously, if I type more characters, you'll see that it gets shorter and shorter because it has less emojis to filter from. But still, that's unacceptable.

And why is that? Well, as you can see here, the search is up here at the header. It's completely distant from the emoji list component. So everything we want to update here has to go through some global state in the picker and then go back down to the emoji list before anything happens. And then it has to update each and every emoji that needs to be removed or re-added. So that's a lot of work to do on the DOM. And that's the most labor-intensive work, actually. So we got global state update. We got state diffing for each of the components. We got DOM diffing for each of the components. And then we have to actually re-render everything. And if I show you what happens is, well, when I go to the components tab in React DevTools, I can actually highlight the state changes and the re-renders. And you'll see here that we re-render everything. And, well, you could say I could use some virtualization or virtual scrolling. But, well, first of all, the emoji list is not uniform. So we got the titles that take full width.

We got non-full lists. It's a very complex grid. And also, this might require a third-party library. And, well, I don't want to use a third-party library. I don't want to force you to install any third-party library just because you installed my package. So I decided not to do that and instead solve it in a different way.

And the way I found it, well, I tried to look at the DOM of the emoji picker and see what I had there. And the first thing I noticed is, well, a while back I added an area label for each of the emojis. And an area label is an HTML property that we add some description for the element that we're looking at so that visually impaired people, users of our website or people who use a screen reader, could actually know what's there. So for each of the emojis, we use the entire name of the emoji or the search term of the emoji as the area label. So we have some search-related information already in the DOM. And I thought, well, maybe I can make use of that somehow. So that sent me digging. And let's go now to the code and try to implement it from scratch.

Now we have the component the way it was before. So we have the input component inside of the search component and it uses a global useFilterHook. And this useFilterHook updates a global state and then when we change here, and then re-renders in a different place. So let's remove all that because we don't really want to use it anymore. Let's try to do something different. And well, the first law of React, you actually have to have state for re-render. So let's add a local state just for this component. So let's do this const value setValue and let's set it with an empty string. Cool. Now, oh, let's import a new state. Cool. Now, nothing will actually happen even if we set the value because nothing is actually reacting to this value. Oh, let's just do this. Cool. Okay.

Okay. So if I try to now do anything here, you will see that we're not seeing any response to that. So why can't we do with this information? Well, let's create a new component right next to this one. And let's call it CSS search dot TSX. And let's import. Always React from React. Cool. Let's now do export default function CSS search. And let's take value and value is going to be a string. Value is a string.

Cool. Now, if value is empty. Oh. Let's return null. And otherwise, let's also return null because I don't know what to do with it yet. So let's use CSS search just to see that it's there. So CSS search. And let's pass it the value. Cool. So no errors. But again, nothing happens. We're not really rendering anything new. But the cool thing appears now. So I'm going back to CSS search. And what I want to do is add a new style element. And everybody will tell you don't do this and you probably shouldn't. But it works, I guess. So why not? And what the style tag does is actually apply some CSS on the DOM as a string. And again, people will warn you from that. But in this case, it works pretty well.

So let's do this. And what I want to do, first of all, is take the emoji list and say that, well, just remove everything. Remove all the emojis in case we have some search results. So first of all, we have the emoji list. So it's called what is the element of the emoji list? EPR emoji list. Let's take that one. Oh. Oh, it has to be a string. Right. Just like that. And then let's say that button EPR emoji. That's the element for each of the emojis. And let's do display none. So what's going on here is that if we have a value, if we don't have a value, we're not doing anything. But if we do have value, we're just removing all of the emojis. And well, let's type something. Oh, we don't have any emojis. That's half of the work. Now we have to actually make the other ones that need to appear appear. So let's do this. First of all, let's try to find all of the emojis that actually have the correct value in them. So what we want to do is again go to this one and then search for all of the emojis that have the area label with our value. So let's do something like this. We can have a property selector for area label. And then the cool part is that we can do a partial match. So it can be either in the beginning, the end, or in the middle. And what we want to do here is when it equals our value. And this is the cool part. If it equals our value, let's display flex. Now all the emojis, if I do not make any mistake there, all of the emojis that have our value somewhere in their area label.

It could be again in the beginning, the end, or the middle. They will be displayed flex. So let's start typing. K, I, N, G. Now we're seeing some results and only the emojis that actually have this. So we have winking, walking, biking, drinking, cooking, and clinking glasses. We have all of the emojis that actually have this term. So this is pretty cool. And this was two lines of CSS.

Let's see the performance here before we continue to the rest of it. So let's try. Well, this is instantaneous. And let's try to see with the throttling of the performance. And again, pretty instantaneous. So I like it already. But let's improve upon that. So let's see what we can do more.

On top of that, you saw here that we also have these empty categories. Now in the state-based version, we could filter out all of the categories that were empty because we knew that already. But in CSS, we removed everything. But the category does not have the title itself. It does not have the emoji name. That's why it's not disappearing. So what do we do here? Well, this is pretty cool because in CSS recently, and by recently, I mean two years ago, they added the has attribute, or the has to the selector, sorry, that allows us to select based on the children of a given selector. And this allows us to actually check if our title or if our emoji group has the actual emojis that we're searching for or not. And if they do not exist there, we'll just make them remove themselves. So let's do this. So let's take off this emoji list and let's do EPR emoji category. And then we're saying not.

And then we're saying not. Not is the pseudo-selector that negates everything that comes within it. And then we're saying has. So where it does not have our area label or the specific element with the area label. And now what we're going to do is again display none.

Now, if I start searching here, let's see what happens. Wait. We're seeing that we don't have any empty categories. And that's again just by adding this tiny part. Now, they'll tell you, and this is probably true, that combination of not and has is not very performant. But again, you cannot compare it to what was in the JavaScript-only version of it. So I find it a pretty reasonable compromise.

Now, we also don't have good search without the counting of search results. So what can we do here? Well, CSS cannot count, can it? It can? Well, let's see. So what we can do here is something pretty cool. And this is one of the oldest cool CSS tricks that we have and not many use it. By the way, for a good reason. But just for the sake of it, let's do it. It's called a counter. And we can do counter reset. And say we'll call it emojis and set it to zero. And then for each of the elements that we're showing, we can actually counter increment by one. So let's do counter increment by one. And the next thing that we want to do is actually show it. So let's do before. So let's do EPR emoji list. And what we want to do is before, we want to show in the content of that element the actual counter. So content, content, counter, emojis. And what we want to do here is say emojis found. And this will show the count of emojis.

But if I start typing, let's see, we'll see zero emojis found. Wait, but I promised you a counter here. Well, apparently the way the counter works is that it goes element by element by element, increment by increment by increment, and then adds everything. But in our before element, well, way before each of the elements were found, so we don't have any matches. So what could we do?

We could do after, right? But if I do it with it after, well, it's down here. This is not good because we don't want to scroll all the way to the bottom just to show that. So what can we do? Well, this is another cool trick. What we want to do here is say that the emoji list should be displayed flex. And, well, the next thing that we want to do is let's do order minus one for the after. And this will pull the after element all the way to the beginning of the emoji list.

So what happens now is that I type, and, well, you'll see that because we turned it into flex, then it's obviously all messed up. So let's also flex direction column, and let's refresh. Okay, so now we're seeing that we have 353 emojis found. We have the entire list all sorted correctly. And, well, let's see what's going on. Yeah, we have a working count. Let's add some space here. Cool.

Now, another cool thing that we can do just with CSS, well, or another cool improvement upon CSS that they added recently is CSS nesting. So this is pretty convoluted, I would say, and this is pretty complex. But what if we could just nest everything under the emoji list? So I'm just going to fix it real quick and move everything to be under the emoji list. That's pretty cool. And even the after element, or the after pseudo element, should work as well, just like this. And now if I refresh and start typing, we'll see that everything works as it worked just before. So I think this is pretty cool. And again, let's try to compare it to what it was before in terms of performance. Let's slow it down, and let's try to see how much time it takes. Oh my God, I refreshed it while throttling. Okay, let's try again. And even while throttling, this is pretty instantaneous.

And let's see again the components tab and see the state updates, and let's see what's going on in here. And as I type, we're seeing that only the search bar gets updated. Now let's see our outcome DOM. So we got this style here, oh, not that style, let's see here. Yes, we got that style element with all our changes here. So this is pretty cool. By the way, CSS Nesting is not yet supported in all browsers I think, or at least not legacy browsers, so check your compatibility as well.

And this is pretty, pretty awesome, I think. And well, this worked quite well. And it led me to try to think if this works quite well, what else this could be used for. And then I created another package, it's called flareup, which is a CSS in JS library that takes this concept to the next level. It's based on the syntax of stylex, the Facebook meta CSS in JS library, but this one is specifically made for NPM packages.

What I noticed is that when building an NPM package like emoji-picker-react, there's always a problem. It doesn't work on SSR for some of the users, it doesn't work with this bundler or that bundler, or they need to import differently, or I have to assume they use some CSS preprocessor. And I thought, well, I want this to just work for everybody. So I created flareup, which is a CSS in JS library intended just for NPM packages and just for open-source libraries that are not application-based and are not applications. And well, it does pretty much the same thing. It takes the CSS, puts it on a DOM, and it just works. It works on SSR, it works in CSR. Actually, I can show you emoji-picker-react uses only this, only flareup. And if I will try to render the emoji-picker without any JavaScript on, it will still come from the server without any problem. Obviously, nothing will happen here because it's static without any JavaScript and without any React. But again, flareup does the rest of it. And the way it works, again, is by placing this, I would say, massive, but still style element right on the DOM of the picker. So this is pretty cool as well.

Thank you so much. It was a pleasure. And enjoy the rest of the conference. Thank you.