$refresh property in Laravel Livewire components

One of the complications I see with Livewire, that is, a negative point when compared to Inertia or directly to Laravel or the implementation itself, is that I sometimes find it very abstract, and there are many ways to do the same thing.

The Problem of Consistency in Interaction
What do I mean by this? For example, in this case, we have a simple problem. We have a detail component and the Cart component included within the detail component:

ShowComponent.php
@if ($post->type == 'advert')
   <div class="mycard mb-5 ms-auto block max-w-96">
       <div class="mycard-body">
           @livewire('shop.cart')
       </div>
   </div>
   @empty(session('cart')[$post->id])
   {{-- si el item esta en el carrito, removemos la opcion de agregar --}}
       <div class="mycard-primary mb-5 block max-w-96">
           <div class="mycard-body">
               <h3 class="text-center text-3xl mb-4">Add this item</h3>
               @livewire('shop.cart', ['post' => $post, 'type' => 'add'])
           </div>
       </div>
   @endempty
@endif

The problem is that when we interact with the shopping cart, we want to reload the Detail component, since there are other related components. However, we don't have a direct way to do so.

The component components in Livewire are complex

The solution, unfortunately, isn't that simple, and what I'm saying is that everything related to components in Livewire can be a bit abstract. Well, there could be many ways to do the same thing, and it may not be entirely clear what we need to do: reload the entire page with JavaScript, do it using Alpine, which also exists, communicate the component in some way, use keys to redraw the component, or directly use the property I'm going to talk about.

What I'm saying is that there are many ways to do the same thing, and it's quite abstract and complicated to actually know what we need to do, which is a bit of what I want to talk about in the next two classes. Again, what we want to do is a bit trivial, but getting to it, at least for me, is a bit difficult.

Introduction to the "Refresh" Property

So, what do I want to talk about with refresh? That's a bit clear, since what we're trying to achieve is reloading that component. So, for this, notice that we have a property that isn't referenced very well, called refresh. In this example, it's being used from a button, for example:

   @endempty
   <button type="button" wire:click="$refresh">Refresh Demo</button>
@endif

So now we'll see that it reloads the entire main page, including the cart components, which is what we want.

Alternatives and Communication between Components

In this example, we're not communicating with the components, but rather directly reloading this one. Another way, which would be a little more efficient, would be to redraw this using a key, which I think we'll see some of. I say it would be a little more efficient because, obviously, when we're reloading, we're making a request to the server again, and it won't just reload or refresh this component section, but also this parent component. But in this case, we really don't care because it's a publication, but well, as I said, all of this is quite abstract.

The problem is that in both cases, the component and the components are siblings, so everything is in the show, and we have them and they're independent, but even though it's true, that action doesn't happen directly in the show, but directly in the child component.

Maybe with Alpine we could do something, but that's a bit like what was mentioned at the beginning; the logic just to perform that reload becomes quite complicated. So, in these cases, just like I did before when I was reloading here (which I don't know what, but now it's showing up because this doesn't appear in red, I'll check later), when we're doing the "piracy" thing here that I told you about, where we wanted to put this in red, sometimes I prefer to do those types of implementations that aren't working for me for some reason. I don't know what happened, but right now I see, instead of being here going around in circles there on how to do it, so to speak, the right way, you'd be putting in the pin, so to speak, in the most efficient way. So, before getting to that, I prefer to reload the entire component.