React

React Context-Api and Lazy-loading

The What...

I am working on a new e-commerce site and I wanted to share some of the things that I learned and put to use for this project. First, there are plenty of docs and talks about both subjects of this post. However, I will demonstrate how I used React's context-api and code-splitting, a.k.a. lazy loading, together to create a modal that I will later flesh out to serve a higher purpose. This blog serves to be a reminder to myself of what I learned and is as a tutorial on how to get the two things working.

The Why...

I want to use the latest and greatest of React and load code on demand. I love the out of the box, easy to use tools that this library offers. I am fairly new to lazy-loading as it was introduced to me at work while going over some Angular 7. I know many don't like Angular 7 or any of the previous six Angular flavors, nor AngularJS, but I 'll make it work regardless, 😏. That being said, learning about it there made me want to try it in React, since I immediately saw it 's benefits.

With that said we will continue with one way to solve this. For the reader, I write about the code, first, and then show it, second.

Getting going:

First let's take a look at my app.js. I used Material-UI for my components to help bootstrap the project. This file is basic and renders a <Grid /> with a <Button />. What I want is that when this button is clicked, the modal, containing the form, should be rendered to the screen.

This is where lazy loading comes in. When lazy loading we want the code that we are not using, or that the user does not need when the app is first loaded to be loaded when and only when they need it. In this case we want to load another component when the button is clicked.

At the moment it does none of that but we'll get there.

Next, let's checkout out our form.js. This code is the code that we will want to lazy load when our button is clicked. It is a collection of components from our library to make a modal.

We will modify it later so that it will not have a state object but rather its state will be taken from Context which is a great tool to help us get information from one component to another. This is used as an alternative to Redux or passing down props. In this case, we could pass props but that would mean not taking advantage of the newContext-Api.

Now that we have a starting point let's begin modifying this code so that we can use lazy loading. The first thing that we should do is update our <Button />in our <App /> so that it will show the form when clicked. We'll do that by importing it lazily — refer to snippet below. line 1 has the important piece of code that we need to lazy load. It uses React's lazy() method and the dynamic import() method to accomplish this.

We have added on line 8 a handleClick() method to trigger the event to load and open our dialog.

On line 27 we will use a short-circuit to help us render the <Form /> component. There is more on short-circuiting here. We also need to wrap our lazy loaded <Form /> in a <Suspense /> component and pass <Suspense /> a fallback prop.fallback is what will be displayed to our user while our <Form /> component loads.

Now some will notice that we can stop here — I mentioned this earlier in the article. If we want to solely lazy load the component and pass props of open, which would be a boolean, and toggleOpen, which would be a function, to <Form />, we could do that and never have to worry with Context. And you would have achieved the same thing.

Still we will continue…

We also need to modify our lazy-load-context-form.js file so it is automatically set to open true. This is just for testing the functionality of our lazy load and will replaced later. That change will look like this:

Now we are ready to lazy load. We can test our component for lazy loading the form by looking in our dev tools Network tab. We should see that when the app is initially loaded that we will have a2.chunk.js file that has been loaded. After clicking our button. We will see two new chunk files added to our history.

React

Context…

Now that we are lazy loading masters, let's work on controlling the open and close portion of our dialog with the addition of Context. To start with we will need to create a context object. I created another file to do this but all we really need is to call the createContext()method on our React instance and store it in a variable that we will export so that we can import it where we need it. Got it!?

And that's all folks! I hope you enjoyed this blog. Please leave comments/suggestions. Thanks for reading!

More on lazy loading here.

Project link on github here.