x-show vs x-if: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

12. x-show vs x-if

Transcript

00:00

We've been using X show a lot throughout the course but we also have access to X if which pretty much does the same thing but there's a slight difference. Let's take a look not only how this works now but also when you might want to reach for X if. Let's start with a simple example of X show as we have already seen a few times before

00:21

and let's set show to false within X data and let's create a div out here and say X show, show am I visible and of course the answer in this case is no. Now if we would set that to true we know that that's going to show it and of course if we introduced a button here to toggle this that would also work as well.

00:42

Let's do that now and then we can roll on to the next example of looking at X if. So we're going to say X on click show equals true and I'm going to say show me. Let's go over there we go pretty straightforward we've already seen this before. So let's copy this component that we've already got,

01:01

pull this down here and switch this over to use X if instead. So for this let's just pull this down below the button. Let's create a template around here because we're going to need to use a template for X if and we'll see why that is and let's change this to X if show

01:20

and then let's just output the div in here. Let's go over give that a refresh you can see it works in exactly the same way. So the question is why would we want to use or when would we want to use X if instead of X show? Well the short answer is if what you are doing inside of the condition,

01:39

so if the condition means that whatever you're doing is more intensive, for example you might be performing some kind of calculation once this is toggled then you would want to use X if. So this isn't actually run beforehand.

01:56

Now that might seem a little bit complex so let's take a look at a practical example of this. So I'm going to go ahead and get rid of this and let's come down duplicate this down here. So I'm going to go ahead and say show users. Let's just say inside of X data we had a list of users that we wanted to perhaps sort.

02:17

So I'm going to go and switch this over to users and we're going to have an array of people in here. Kind of like the example we looked at before where we had a name and then we had some points. So let's say that we brought back the example of ordering these users by their points. So let's say Billy and set that to 100.

02:42

We'll just leave it at 2 for now because the actual data itself doesn't matter too much. So let's go and say users ordered by points. And let's make this a getter and let's return this user's sort. Bring in our sort enclosure and then say b.points minus a.points.

03:07

That's going to order them by points in descending order. Now inside of here let's switch this over to an X show and say show. And then let's iterate through these. So say template and X for user in users and let's just make this really simple.

03:30

Let's just output the user's name in here. User name and let's have a look at this. Okay. We've got show is not defined so let's just bring that back again.

03:45

And we're going to change this to there we go. So what that has now done is when we click on it it's showing them users ordered by their points. Let's just actually bring the points in here as well. Change this to a span just so we get a good idea of this.

04:00

I promise there is a conclusion coming here in a minute. So let's say points and let's wrap this in a div real quick. And let's come over and there we go. We've got Billy with 100 points and Alex with 10.

04:17

So the point of this is if I go ahead now and switch this over to user's order by points, what that's actually doing is it's always running this. So we can prove that by console logging sort. Now this isn't very complex so there's nothing wrong with doing this initially on the page,

04:36

but that's always going to be run. You can see it's run here twice. Now the difference between x show and x if is if we were to create a template out in here and then ended that template down here and said x if show.

04:55

Now let's look at what happened when we initially land on the page. We only see this called once. We can get away with this not being called once by making this a method. So let's change that over to a pure method and there we go.

05:07

It's not called at all. Now when I click show users it's called. So let's keep it as a function rather than a getter because that's always going to be called. And there we go.

05:17

So if again we change this back to a div and then set x show to show, that's always going to be called because it's being rendered just not shown. But if it's x if that's conditional render. So it won't be called until we ask for it.

05:33

Hopefully that makes sense. It's a bit of a long-winded way of explaining that, but that's really the usage for x if. If you've got something happening inside somewhere that you want to only be run

05:45

like this ordering of the users by points, once the thing has been shown or the condition has been met, then that's what you want to use. That's the difference between x if and x show.

Episode summary

In this episode, we're diving into the differences between x-show and x-if in Alpine.js (these are two ways to conditionally show and hide content). You might have noticed we've been using x-show a lot in this course, but there's also x-if, and while they seem pretty similar, there are some key differences worth understanding.

First, we revisit the basics of x-show with a simple example—a button that toggles the visibility of a message. After refreshing our memory, we copy this component and rewrite it to use x-if, showing how the setup is a little different (especially needing a <template> tag), but the visible result looks just the same.

But here's where things get interesting: we explore why you'd ever want to choose x-if over x-show. It all comes down to performance and when the code "inside" your condition gets run. With x-show, your content is always rendered in the DOM (it's just hidden or shown), so if you have a costly calculation, it will run every time, even when hidden. With x-if, the content (and its calculations) don't even exist until the condition is true—nothing is run until you need it.

To make this concrete, we walk through an example of rendering a user list sorted by points. By moving the expensive sorting calculation inside an x-if, it's only triggered when the list is shown, not before. We use some simple console logs and switching between getter and method functions to really highlight this difference.

In short: use x-if when you have something inside your markup that you don't even want to run until it's needed (like expensive calculations or API calls). Use x-show for simple cases where you just want to show/hide things that are already lightweight and don't have costly side effects.

By the end of this episode, you'll know exactly when to reach for x-if and when x-show is good enough!

Episode discussion

No comments, yet. Be the first!