Bundling Component Updates0:00
Every component update triggers a network request, and that can be an issue, because while you end up with a lot of HTTP requests, which means that the server has to handle those requests individually. But Livewire has a solution. It bundles all of the updates into a single request, which makes a lot of sense, because for one, that cuts down on network traffic, and two, that makes it easier for the server to process all of that. Yeah, it's still going to have to process all of the information and all of the updates, but it at least does it within a single request and not 10 extra requests. But there are going to be times when you want a component to update independently.
Using the isolate Attribute0:40
but it at least does it within a single request and not 10 extra requests. But there are going to be times when you want a component to update independently. You don't want those updates bundled with anything else. You want them run in parallel. In which case, you would need to mark the component with the isolate attribute. For example, I think the search component would be a good candidate here, because as the user types their search term into the search box, I want those results to come in maybe not as fast as possible, but I want it to be independent from any other update. So by marking it with isolate, I can ensure that the updates for this component are going to be separate from the bundled updates for all of the other components.
Lazy Components and Isolation1:18
So by marking it with isolate, I can ensure that the updates for this component are going to be separate from the bundled updates for all of the other components. And it's really just as simple as that. It's just mark that component with the isolate attribute, and you're good to go. Now lazy loaded components, like our publishedCount component, is isolated by default. So any component marked as lazy, the updates are isolated. They are going to run in parallel with the bundled update. But maybe you don't want that. Maybe you have a page with a lot of lazy loaded components, and you want to bundle those together. Well, all you have to do is pass the isolate parameter as false.
Disabling Isolation for Lazy1:54
Maybe you have a page with a lot of lazy loaded components, and you want to bundle those together. Well, all you have to do is pass the isolate parameter as false. And that's it. The updates are no longer isolated. They are going to be bundled with all of the other component updates. And it really is just that simple.
