In this video, we use the model-specific hooks that are generated by the tooling to provide fine-grained control over how and when to display models in a UI. We also use modern React development practices to integrate models into your UI components, while respecting their lifecycle and dependency relationships.

So the last thing we want to look at is how we can use the lowest level React component that’s available for bringing our models, which is the use of hooks directly.

So we already saw the higher order component and we saw the use of the context.

The hook gives us the most fine-grained control and can be used still relatively easily, but there is a few more moving parts in order to make sure everything is working constantly.

You want to use this technique largely if you need finer-grained control over how the models are instantiated or how you want to use the models relative to their life cycles.

So let’s go back to our dispenser view.

We already showed how we’re using the higher order component here, how we’re using the context here to make it available as a child.

And then I have one other component here, which is our config details with hooks.

So I’ll say config details with hooks.

Again, it’s not taking any properties and if I go into here, I can just make sure that it’s putting in the right details as well.

So now we’re getting another component here where the hooks are, this particular components can be used.

The way that we use this is within the component, I can use the generated hook, which is just the use config details hook here.

And what this is providing is a couple of things.

So it’s a more complex object, one of the things is a model that I can use.

So this is the configuration details model, but at this point it’s returning it raw.

So we don’t really know what state the model’s in.

It might still be loading if it’s being instantiated for the first time.

So there could be cases where the model isn’t ready to be used.

So as part of this, it also returns a status object.

Now the status object has a few things in there, including is it returning an error or is the model ready and available.

So you can in your code start doing some things that say, if ready and then do something along those lines where it’ll render, but you’re having to put in a number of checks to make sure that things are ready to use.

And you find your component code becomes more complex because you see these sorts of patterns repeated all over the place.

So to work around that and make the hooks a little bit easier to use, if you’re not using it in any of the other formats that we showed, is it also returns a component, which is really a thing of like a model guard.

So in this case, we can use this and the status that’s being returned together, where I can say, use the KOS model loader, and I just need to spread the status object.

What that says is that it’s not going to render the children here until the model is ready.

Now this applies here to the direct children that we’re using.

It also applies to any of the children underneath it.

So this model guard really ensures that before any of the children are going to be rendered, the model will be available and in a good state to use.

So let’s actually go and create a new component that we can use to demonstrate that as well.

So I’ll just quickly go in, we can generate a config details grandchild, and we’ll generate that.

So in here, I can freely say config details grandchild, and I can make use of this model with guarantees that it’s going to be already loaded.

So if I have any manipulation down here, any children down here that I want to use, this is especially common where you have tightly coupled components, where they don’t really work independently of each other, but you want to still use proper component boundaries.

So in this case, there’s a couple of interesting patterns that you can use.

I could pass this model in now and knowing that it’s going to be ready by the time it gets rendered.

However, I can also use a built-in context that’s available whenever you use one of the hooks.

So I can say that the model is equal to use the context model.

This will just go and find the next model or the first model that it finds going up through the React context hierarchy, through the component hierarchy, and it finds the first model that’s been created using one of these hooks.

So this is, again, one of these cases where you have pretty tightly coupled components, and I can use this context throughout that component structure.

So I’m going to actually put this in the wrong place.

Let me start with opening up with over here instead.

So I’ll use context hierarchy.

Just by virtue of it being a child of that component that used the hook, it’s now available from within here as well.

I can specify in the use context model the types.

This is generic.

So in this case, it’s going to be a config details model, so that I can say – and again.

In all of these cases, the same model is being used.

It’s used in the same instance.

The framework is responsible for fetching all these things, but I have a little bit more fine-grained control over how I can bring the models in and what I can do with it at any given point in time.

Thank you.