Which Livewire method should I use?

so you have a layer of a Livewire application but now how do you pass props or data from your server to your template in the best way because there's a couple different ways to do it you could grab that data when the component is mounted you could pass the data into the component when it's rendered or you could use something flashy like computed properties but how are those things different and how are they similar and when would you reach for one or the other let's take a [Music] look so first off the render method which is expected to return a view so it's really similar to a controller in that sense so the render method gets called on the initial page load as well as every subsequent component update so if you're passing in this bookmarks parameter to grab all the bookmarks from your database that is going to be reloaded every time this component updates so if we had another function here let's say a submit function that creates a new bookmark and you're calling this from your Live Wire view then this render method is actually going to rerun it's going to grab all the bookmarks again this is where it differs from something like the public function Mount method which is only going to be run on the initial component load you can think of the mount method similar to a class construct which we don't have in Live Wire where if you need to load specific Properties or if you're using any kind of Route model binding that's where it's going to automatically pass into the mount function fun one thing to not is if you are using Livewire volt even the class component it's going to have a little bit of different name the public function render is basically just replaced with public function with so this is exactly the same as this so if we have this list of bookmarks on our main page and if I want to click into one we're getting the information or rather we're passing the information to this particular page so how do we accept that in our component well that's what the mount function is all about if we are passing here you see that we are redirected to the route bookmark.it we're passing in the bookmark ID and our web routes we see that that is using route model binding so we're actually passing in the whole entire model to this view well now in our bookmark edit view we're passing that show bookmark Live Wire component as well as the model itself so what does this look like well as long as we declare the model as a public parameter then it's automatically passed into our view so in show bookmark we have access to every single parameter from this model without having to do anything else essentially what this is doing is mounting the bookmark to the component so we're not passing it into the render because we're not pushing any information into the view rather we're gaining the information that is already being passed to the component when you load the page again the mount function is only going to load this information on the initial load it does not reload it on every subsequent component update like the render method would okay there's one more way to pass data or rather to grab data and push it into your component's view layer and that's through computed properties but when would you use computed properties over mounting the information on the component load or using the render function well let's take a look so computed properties are ways to create derived properties within Livewire so very much like accessors on an eloquent model computed properties allow you to kind of access those values and then keep them cached for future access on on future requests for the majority of use cases something like this and this render function is going to be enough you're grabbing all the bookmarks and then you're passing them to the view but what if every single user who is accessing this page accessing this component doesn't necessarily need to see the information that's being passed into the view for example if we're doing some kind of authorization check and we have a video on authorization that you can check right up there if you're checking if the user can actually view these bookmarks you're still making that eloquent query you're still quering the database and essentially just not choosing to render those bookmarks on the page well what if we could stop that from happening let's change this to be a computed property instead so we can remove the actual access to bookmarks we're just going to return The View bring in the computed property function bookmarks return bookmark all and so this is essentially the same as what we just have but now it is a computed property essentially that database query is only executed if the information is actually required from the component so I installed lville debug bar just to show that we're not actually running that query anymore because we have it cached we have it cached using the computed properties so if I pulled up the queries you can see here that we just have the standard queries of sessions and grabbing the actual user but not the bookmark query that we had why don't we change that and see that that query is still being run when we don't use the computed property so changing that back to just pass it in with the render function and now you can see that we're grabbing all the bookmarks from this database query again not specifically important for this particular demonstration because that might not be an exp ensive query but imagine if you are using any kind of indepth authorization where you don't want that query to be run because you're not necessarily showing it for every single user who accesses that page that's where computed properties can really come in handy since computed properties aren't directly accessible within your component like regular properties are you actually have to access them with the this parameter so instead of bookmarks as bookmarks it would be this bookmarks as bookmark and everything's still working as we would expect so just to know internally Livewire will cash that initial request that initial value on first load so this works great for any kind of derived values where you don't have to worry about any performance implications but that computer property is only cached for a single request the good thing is liveware has some cash properties within this computed method where we can make that cach work great for your particular instance that you need these computed values so let's take a look now if you need to store the value of the computed property longer than the lifespan of the live component that's when you would reach for laravel's cach features but instead of having to type all of that out to basically get the ID from the liary component and set it to be stored in the cache and to remember that specific cache you actually have an easy option within this computer property it's persist true so what this does is it allows Livewire to store that property that computed property in the cache for a longer period of time than the initial Livewire component life cycle by default that's going to be 3,600 seconds but you can optionally set a seconds parameter to whatever you need that to be now you can also cach the value of this computed property across all of your components with the cach true setting every instance of this component in this case method test Live Wire component will share the same cached value for this bookmarks now another Nifty feature within computed properties is you actually can emit the entire public function render method now because all of the data that you're passing into this component is done through the computed property now this was already possible within Live Wire if you weren't passing any data or any properties to the view but because that's now been emitted and switched to computer properties we can remove this and now everything works exactly the same so it's not really using one over the other in every single circumstance you're going to need to know when to use each one of these methods each one of these properties to either pass Pole or push data into your application the Live Wire gives you the flexibility to do just that when you need it [Music]

Channel: Laravel

Views: 4,269

Keywords: livewire tutorial, beginner laravel livewire, livewire for beginners, livewire data tutorial, data in livewire, livewire components laravel, laravel livewire easy, laravel livewire simple, laravel livewire video, laravel livewire methods, laravel livewire hooks, laravel livewire properties, laravel livewire mount hook, laravel livewire, livewire computed property, livewire caching, livewire properties tutorials, data mount livewire, laravel livewire explain, livewire data

Id: _Xt0xATXV1E

Length: 8min 19sec (499 seconds)

Published: Tue Jul 02 2024