‫So let's do that.
‫So let's build that custom hook
‫to consume the cities context
‫everywhere in the application.
‫So let's call this one here use cities,
‫and again, we don't need any argument.
‫And then here let's use the use context hook
‫that React gives us
‫and then we need to pass in of course our context.
‫So the context from which
‫we want to read the data.
‫And by the way,
‫this is necessary here
‫so we need to tell React which context
‫we actually want to read from
‫because there can be multiple contexts.
‫And so then of course,
‫React needs to know which is the one
‫that we are interested in.
‫So we want to then return this context,
‫which basically is not even a context,
‫it should be called the value,
‫but well, that's really not that important.
‫What matters is that we now
‫do again the check to see
‫if we are using the context
‫in the wrong place.
‫So if this is undefined,
‫it means that we are trying to access
‫the content value in a place where we shouldn't.
‫So in a place that is actually
‫not a child component of this provider.
‫So in this case, let's throw a new error.
‫So cities context was used
‫outside the cities provider.
‫All right and then all we need to do
‫is to export that here
‫and import it wherever we need it.
‫So that was I believe in the city list and country list.
‫So we can just control or command, click here.
‫So that will then open up that file.
‫So the country list and the city list.
‫And of course you can also open them directly here
‫from the components folder.
‫Now, okay, so we see that this component indeed
‫before relied on these two props.
‫And so now let's give this component
‫this data back but through the context.
‫So cities and is loading will now come from use cities.
‫Remove that from here.
‫And with this, it should already work.
‫So let's make this a bit smaller.
‫And here we go.
‫Let's just reload that and it works indeed. Beautiful.
‫So receiving its data now from the context directly.
‫And so now all we need to do
‫is to copy this also into the country list.
‫So let's come here, click there.
‫That's sometimes a bit easier than to go
‫through all the files right there in that folder.
‫So place that here, remove the props,
‫and now this will not exist.
‫So we just import that again
‫with this nice trick.
‫Click here and beautiful.
‫Load that and it works, great.
‫So with this, we now refactored our application
‫to using context instead of having
‫all that logic right here
‫in the application folder as we had before.
‫And so now if we want to jump into this application
‫if we have never seen it before
‫and open up this component,
‫then it's really easy to understand what it does.
‫So there's no clutter here.
‫All it has is the route definition.
‫And if we then want to know about the state,
‫we can just go to the cities provider
‫and get to this context
‫and see how it all works.
‫So where the data actually comes from.
‫And so this really is a beautiful pattern, I think.