Building Reactive Realtime Applications with Livewire
This episode is for members only

Sign up to access "Building Reactive Realtime Applications with Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
05. Reactivity when adding a new post

Episodes

0%
Your progress
  • Total: 1h 43m
  • Played: 0m
  • Remaining: 1h 43m
Join or sign in to track your progress

Transcript

00:00
Okay, so not only are we gonna be creating the form
00:02
to push a new post in this episode, we are gonna talk about the reactivity of this because it's basically just not gonna work. Okay, let's get started.
00:10
We'll build the form out and do everything that we would normally do. And then we'll look at some of the issues. So let's go ahead and make out a create post form in here.
00:19
We're just gonna create an entirely new component for this to keep it separate. And let's head over to our dashboard and just put this above the post index here.
00:28
So Livewire create post. And there we go. So we'll go ahead and open up our create post form and let's just start to build this out.
00:39
So we'll make this a form and let's just reuse some of the elements that we get with our starter kit here. So I'm gonna create a label out for the body
00:48
and say post body, but I'm gonna hide this with the SR only class in Livewire. And then down here,
00:55
we'll just start to use some of the blade components that already come with this starter kit. So we'll have a text area input, which doesn't exist at the moment.
01:02
We do have an input, but it's gonna work in exactly the same way. So we'll switch this over and we'll set a class of width full to this
01:09
and we'll set a height of 28 and a padding of four. Now, if we just go over to our textinput.blade.php, I'm basically just gonna copy this, create our new component
01:19
and it's gonna pretty much behave exactly the same, but obviously it's going to be a text area instead. So we'll create that in there. We'll swap this out for a text area
01:29
and of course, end the text area there. But other than that, it's just gonna work in exactly the same way. Okay, so we've got our text area on the page.
01:37
Let's have a look. There it is. So we can obviously start typing and just down here,
01:41
we'll have our input errors because of course we need to validate this. So that's just X input error. And then the messages we get through into here
01:48
are just the errors that we get through. Now, in this case, this form field is just gonna be called body. So let's say errors get body.
01:56
And to be honest, that's pretty much it. Let's go ahead and hook up the text area to a body property
02:01
that we're gonna have with inside this component. And while we're here, let's add a placeholder and just say,
02:07
what do you want to say? Okay, so we'll add our submit button down here, which is just gonna be our X primary button and the off and we'll just say post.
02:19
And for this outer form, let's set a space on the Y axis of two. And then why don't we just hook this up now? We don't have any methods
02:29
or anything like this here, but let's say wire submit and we'll just say create or submit. What if we want to say?
02:35
So that's our form. We'll separate this out in a second, but we have everything on here that we need. Okay, so over in our create post component itself,
02:45
we know that we need to store a body in here and we can go ahead and validate this. So we can use our rule in here to say this is required. We'll just keep it like that for now.
02:59
We can customize this as well. So we could set a specific message in here. You need a post body, whatever you want us to say,
03:08
and then we'll create out that create method and we'll go ahead and validate and then we'll create the post and then we will push it to our list.
03:22
Well, in this case, we're gonna be broadcasting or dispatching an event within LiveWire so we can read it from our other component,
03:28
but that should be pretty much it. So let's click post and everything's working. Okay, let's tidy this up before we go any further. So I'm just gonna set a space Y of eight in here
03:37
and I think that's okay. We can leave it like that for now. Okay, so let's go and create the post out, which is pretty straightforward.
03:46
And then we'll look at really importantly how to get it into our list. So let's go ahead and create a post out in here. So we need to do this via the user posts relationship
03:58
and we'll create this and we're just gonna say this only body. So just put that in there and then we wanna go ahead and reset the body.
04:06
So this reset body and that's it. So that will actually create the post for us. So I'm just gonna write something in here and hit post. Obviously nothing happens at the moment
04:15
because we're not doing anything with this. This is a completely separate component. So remember this is not re-rendering when we do that. Obviously when I refresh the page, it will come in.
04:24
Now it's not coming in at the moment. The reason for that is just the ordering of the stuff that we've got in the database because we can see that this has been created
04:33
because we created these, the dates are overlapping. So for now, I'm just gonna get rid of everything out of the database and we'll just check that this works nicely.
04:42
Okay, so we've come across an issue here where we can't render out the first thing. So it's probably good to fix this up now if we don't have any posts in the database.
04:51
So let's go over to our post index here and just fix this up. So let's go and create an if statement out here and say count chunks and end that.
05:01
Well, we could do this for this entire thing actually. End that there and we shouldn't see that error, great. Okay, so now when I type something, hit post and refresh, we get that first one in there.
05:13
Okay, so we want this to push automatically to this list. So the problem that we've got here is if we go and say this dispatch and then say post created,
05:25
and then we give the post ID because remember we only need the post ID to push into the first batch that we've got. This will push it to it
05:33
but we won't get the reactivity that we need. So we'll see how to solve that in a second. Okay, so if we go over, we've dispatched this post created event with the ID,
05:43
we can pick that up now in our post index. So let's go over to our post index component and let's listen for this and then do something. So let's do this down here
05:54
and we will call this prepend post, that kind of makes sense. And we know that we get the post ID in with that event and we can listen to this in here with the on attribute.
06:06
So we can say when we get that post created event, invoke this and then do something with that post ID. Just to demonstrate that this does come through, let's go over and type something in,
06:17
hit post and there we go from our main index component, that's now dumping out the post ID. Now this post, because we're not just dealing with a normal list of posts
06:26
and we don't wanna refresh the entire list of posts, that's really, really important. We need to push this ID onto the first chunk. So the first thing that we need to do is be really careful
06:37
if we don't have any chunks. So if we don't have any records, we need to create the first chunk before we push to it. So the first thing that we're gonna do
06:44
is check if the chunks array is empty. And if it is, we're gonna kind of initialize it with a default empty array in here.
06:54
Now down here, what we can do is go and say this chunks zero. So the first chunk that we have, cause we always wanna push this to the first chunk
07:05
that we're dealing with. And we're gonna set that to the post ID cause that always needs to be at the top within an array. And then we're just gonna spread out
07:12
the existing IDs from within there. So we're just gonna say this chunks and zero. So basically build up a new array with the existing chunks for the first chunk
07:23
or the existing IDs for the first chunk, but then put the post ID on top of all of that. So now that we've done this, we would think this would work.
07:31
So let's go over and just write another message in here. I'll put something slightly different. Hit post and you can see nothing happens. Now the code here is completely valid
07:40
and it should be working. Why isn't this working? Well, if we cast our mind back to when we looked at the basics of reactivity
07:47
a little bit earlier on in the course, we know that when we are over in our post index to start with, we're passing down the IDs into this post chunk component.
07:58
Now, when we modify the chunks, which we've just done by pushing that new post to it, this is not reactive because we haven't told this to be reactive from our post chunk component.
08:10
So this is a really easy fix, but this is the kind of lesson here. With reactive, when we add that attribute, it will work, but then we'll have a knock on effect
08:21
when we start to do more infinite scrolling or whatever else you're doing in your application. So we need to be really careful with this. I'm gonna add this now and then later on,
08:30
we are gonna refactor this once we see the issue. So let's go over to our post chunk component and as easy as we saw from the small example earlier, we are going to set this to reactive.
08:44
Now I'm gonna say this again, because this is so important. This is a solution, but we need to be really careful where we use reactive. So we don't end up with too many re-renders
08:54
and that's the whole point of the course. So we'll be changing that later, but let's get this working now. And then of course we can always refactor it,
09:00
it's only code. Okay, so I'm gonna go ahead and type another message in here, hit post. Now that we have that reactive property
09:07
and that array has been updated with a new ID, the component here has been re-rendered. Now let's just take a look at this in our network tab, just so we can see what's going on.
09:18
So let's go ahead and type another message in here and hit post. And this one, of course, this request was to actually post that data through.
09:26
And this is where the reactivity comes in and actually gives us that new data back with the new thing in here. So you can see that we've got a snapshot here
09:35
and we've got a snapshot here. So we've got two in here. We saw that example from earlier where the more reactive our components are
09:42
within each other, the more markup we're gonna get through back from Livewire to rehydrate what we see on the page. But that's pretty much it.
09:50
So we've got this working now, we've created a separate component in here, dispatched an event, which has created an additional network request.
09:58
We'll talk about the trade-offs later. And then we have, of course, set that to reactive. So this actually updates. So not too bad at the moment,
10:05
but let's continue on, particularly with our real-time stuff and see how we get on with just adding that reactive attribute.

Episode summary

In this episode, we're tackling the challenge of adding new posts and making sure that our UI updates automatically when you do. We start by building a brand new form component for creating posts—keeping things modular and organized. You'll see how we create a textarea blade component (since our starter kit didn't have one yet), add validation, handle errors, and set up the submission flow with Livewire actions.

Once the basic form is up and running, we dig into the trickier part: making sure the list of posts actually updates reactively when a new post is created. Initially, even after submitting a new post, it doesn't appear in the list until you refresh the page. That's because our components are separate, and the reactivity isn't flowing between them by default.

To solve this, we start dispatching a Livewire event from the creation component and listen for it in the post index component. When we get the event with the new post's ID, we prepend it to the post list—making sure to handle edge cases when there are no posts yet. However, we notice that even after updating the array, the UI still doesn’t change. This is a classic reactivity gotcha: Livewire won't re-render unless the child component knows it needs to be reactive.

The quick fix is to add the reactive attribute to the relevant component, which finally gets our UI to update instantly as soon as you add a post. But, as we discuss (and will dive deeper into later), making everything reactive isn't always the best long-term approach due to possible over-rendering and performance issues—so this is an important lesson in balancing reactivity and efficiency.

By the end, you’ll have a working create-post flow that's reactive, understand how event dispatch and listening works between Livewire components, and get a preview of the more advanced optimizations we'll cover as the course continues.

Episode discussion

No comments, yet. Be the first!