In our reducers in action files, so in the store file in general, we won't have to do anything because
all that Redux related stuff can stay as it is,
it's not related to components and therefore we don't need to do anything with React hooks in there.
The shared folder has our utility file and these functions here can also stay the way they are. Now in the
hoc folder, that changes,
here we got four components.
Now the aux component is a functional component,
the async component which we use for lazy loading when we route is actually a functional component
that returns a class-based component.
Now we could try to convert this but actually, it's not worth the effort,
instead we can delete this whole async component folder and instead use a feature I introduced in the
React routing module of this course, we can use React.lazy.
We do that in app.js and we use a native built-in React feature now for lazy loading. Instead of using
async component here in these three places, you can call React.lazy here. The lazy method is provided
by React and essentially it does what we before had to do manually with async component, with our higher
order component,
this was added With React 16.6.
So now with React.lazy here, we have to add one other thing though or we have to import one other thing
and that's the suspense component from React.
This has to wrap any place where we want to use these lazy loaded components and I will also rename
these components to checkout, orders and auth so that I can now use them as JSX elements and hence
they have to start with capital characters and then down there for the routes where I will render them
in the end,
I will wrap this place here with suspense, so put the closing tag after routes here and suspense takes
a fallback property which defines what to render whilst we're waiting for one of these lazy loaded components
to load and there, I'll render a paragraph where I say loading, you could render anything here, you could
render a spinner, whatever you prefer.
So now we can use our lazily loaded components in the routes and for that, we just have to replace component
here with render and then there, we get a function that executes which should simply return our JSX
component,
so auth like this, the burger builder is not lazy loaded so we don't need to change it but down there, all
these marked components there,
we use the render method instead and then simply return
in this case here, the checkout being rendered inside of this function we pass to render,
here we use or we render orders and then down there, we also use the render method and we render the
auth component like this.
And now with that, we're using React.lazy and suspense, of course
now I need to remove that async component
import up there,
otherwise I'm getting this error which I'm getting and with that out of the way, this still works and
you can see I can still navigate around,
we're now using React.lazy though. So we didn't really change a component to a functional component here,
we're nonetheless using a modern React feature which is never a bad idea.