Optimizing Network Requests Through React State Management

Let's say...

You're coming home from a shopping trip. You unpack your groceries and bam, you forgot to buy eggs. You say it’s fine and you’ll get eggs on your next shopping trip because there’s no absolute way you’re going back to the supermarket just to get eggs. It’s just a 2-minute walk, BRB.

That wasn’t too bad. But you noticed every time you run into the grocery store, you seem to always forget to buy eggs since the placement of eggs products inside the market is really obscure. And it’s just eggs, one of the many things on your grocery list. Because of this, you find yourself running back to buy eggs as soon as you get home. It might seem sustainable at this point, so let’s talk hypotheticals. Now there’s a sudden road blockage and it now takes 30 minutes to get there. You don’t know what caused this, maybe a traffic accident but one thing for sure, one way or another it might happen again one way or another.

How is this relevant?

This is analogous to one of the many problems I’ve encountered during the frontend development bootcamp here at GFED. I integrated Contentful, a content management system (CMS), to a Next app and as much as possible, all content must be placed in the CMS instead of being hard-coded. One of the things I was fetching was the navigation links. Since I was using Next.js app router which specializes in Server-side rendering (SSR), the ideal scenario would be to do a single GraphQL fetch at the server-side for all necessary data, render the page including all of its content, and then serve the bundle to the user. Seems simple enough, but what about fetching and rendering for additional components such as modals or sidebars that do not need to be rendered on initial load? Do you also fetch server-side then render the component every time they’re opened by the user?

Seems familiar, right? Everytime you want eggs, do you go back to the store to buy one OR do you just buy a lot of eggs during your initial trip and save up on effort and energy? It can be seen from the image that it's not a very efficient way of fetching and rendering since every time the sidebar is opened, a network request is sent out to the server. One can expect the sidebar will indeed get rendered again and again especially for mobile users.

To solve this, why not just don’t forget to buy eggs? Only one trip to the grocery store, take all you need, and that’s it. Problem solved. Question now is how will the eggs be used?

Reusability comes into play

I arrive from the grocery store and I have a lot of eggs. But what if someone asks for the eggs at the kitchen, then another person will also be using the eggs for baking, another uses eggs for their science project, and the rest of the eggs go to the refrigerator. How do I easily distribute the eggs where it’s needed? Same thing with the fetched navigation links. If I want to use them repeatedly, which in this case they’re used in the sidebar, header, and footer, how will they access the data?

I solved this by implementing a global state management system with React Context. Other popular state management tools include Redux and Zustand but for the bootcamp where learning is prioritized, I was told React Context would help me gain a deeper understanding into how React works, and that it did.

What I did next was that on initial load of the app, the data is fetched and stored using React Context through a useEffect hook that can be accessed globally by any components. This way, even though the sidebar renders on user click events, the application does not send a network request for every render anymore since the navigation links are already available in React Context.

Conclusion

This optimization can also be called caching and it is one of the many ways one can optimize their website/network to save up on resources and account for instances of slow connection where the data fetching can take a long time. From my example before, this is analogous to unexpected road blockages or traffic jams where data is having trouble getting from the server to the client.

Other ways to cache or optimize network requests such as using server state manager libraries such as react query which can handle the caching for you. Minimizing fetching certainly mitigates network issues and can guarantee clients’ good experience with the website even under these undesirable conditions.