Architectural Techniques for React Optimization! Part - 1

Enhancing the performance of your React application not only improves user satisfaction but also significantly boosts your site’s effectiveness by reducing user churn.

When developing a high-performing web application, it's essential to consider not just the tools and ecosystem but the underlying architecture as well.

In this blog, I will guide you through my top three strategies for optimizing your React application architecture, plus a Part-2 of this series that could make all the difference. Let’s dive deep into methodologies that are both innovative and practical, ensuring your application runs smoothly and efficiently.

---

1. Start Strong with the Perfect Foundation

Begin your project on a strong foundation by choosing a boilerplate that includes all the essential tools. Covering all essential aspects, a reliable boilerplate should include:

• Global State Management for seamless state handling.
• API Services Manager for efficient API interactions.
• TypeScript for type safety and advanced coding.
• Testing Tools for reliability.
• Styles and Assets Loaders for effortless management.
• Optimized Configuration for enhanced performance.
• Bundling Tool for streamlined deployment.

This custom React boilerplate is your secret weapon for building efficient and scalable applications. It provides all the essential tools you need to get started quickly and ensure your app can handle future growth.

Clone the boilerplate today and elevate your React development experience:

git clone https://github.com/vivekmengu016/react-boilerplate-webpack5 myAwesomeProject

Discover how this meticulously curated boilerplate can revolutionize your projects by visiting this GitHub repository.

---

2. JSON-Based Routing and Code Splitting

Navigate your React app smoothly and quickly by organising your routes in a simple JSON format and breaking down your code into smaller, more manageable pieces.

Part 1: Setting Up JSON-based Routing in React

To streamline navigation in your React app, start by implementing JSON-based routes. This approach helps organize routes clearly and manage components effectively. Here’s how to set it up:

1. Install react-router-dom-jsonroutes

Supercharge your React routing to the next level! This package builds upon react-router-dom v6, offering advanced features like JSON routing, authentication middleware, and robust nested route capabilities.

npm install react-router-dom-jsonroutes --save

2. Define Your Routes:

For better maintainability, establish a central location for your routes. Create a file named routes.jsx and define your routes there.

//routes.jsx
import Dashboard from './modules/Dashboard';
import Projects from './modules/Projects';
import EachProject from './module/EachProject';

const routesList = [
  { path: "", component: Dashboard },
  {
    path: "projects",
    component: Projects,
    children: [{ path: ":id", component: EachProject }],
  },
];

export default routesList;

3. Implement Routing in Your App:

Use the routes in your main index file.

// index.jsx
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import JsonRoutes from 'react-router-dom-jsonroutes';
import routesList from './routes';

function App() {
  return (
    <BrowserRouter>
      <JsonRoutes routesList={routesList} />
    </BrowserRouter>
  );
}

export default App;

For additional options and documentation, visit the react-router-dom-jsonroutes GitHub page.

 

Part 2: Implementing Code Splitting

To improve load times and performance, integrate code splitting into your route definitions.

1. Install react-loadable:

This package allows for dynamic imports and rendering components asynchronously.

npm install react-loadable --save

2. Modify Routes to Use Loadable Components:

Update your routes.jsx to dynamically load components.

//routes.jsx
...
...
import Loadable from 'react-loadable';
const Loading = () => <div>Loading...</div>;

const DashboardChunk = Loadable({
  loader: () => import('./modules/Dashboard'),
  loading: Loading,
});

const ProjectsChunk = Loadable({
  loader: () => import('./modules/Projects'),
  loading: Loading,
});

const routesList = [
  { path: "", component: DashboardChunk },
  {
    path: "projects",
    component: ProjectsChunk,
    children: [{ path: ":id", component: EachProject }],
  },
];
...

By using route-based code splitting, each route loads only the necessary components, improving the initial load time. This approach centralizes and simplifies managing asynchronous component loading, which can be especially beneficial for large-scale applications.

keep reading our next discussion on prefetching bundles to further optimize your application's performance.

---

3. Prefetching Code for Faster React Navigation

Prefetching is the process of loading JavaScript code in advance of it being required, potentially based on user interaction patterns like hovering over a link. This can be especially useful for larger chunks of code associated with features that are not immediately needed on the initial load but might be accessed subsequently.

1. Modify the Component Export in routes.jsx:

Export your Loadable component to make it available for prefetching.

// routes.jsx
...
export const DashboardChunk = Loadable({
  loader: () => import('./modules/Dashboard'),
  loading: Loading,
});

export const ProjectsChunk = Loadable({
  loader: () => import('./modules/Projects'),
  loading: Loading,
});
...

2. Enable Prefetching on Hover in header.jsx:

Trigger code loading when the user hovers over the navigation link.

// header.jsx
import React from 'react';
import { NavLink } from 'react-router-dom';
import { DashboardChunk, ProjectsChunk } from './routes';

const Header = () => (
  <ul className="menu">
    <NavLink
      to="/dashboard"
      onMouseOver={() => DashboardChunk.preload()} //this does the magic
    >
      Dashboard
    </NavLink>
    <NavLink
      to="/projects"
      onMouseOver={() => ProjectsChunk.preload()} //this does the magic
    >
      Projects
    </NavLink>
  </ul>
);

By incorporating prefetching, your app can load heavy components in advance based on user interaction, such as hovering over a menu item, drastically reducing the perceived load time.

---

In conclusion, by following these three steps, you can significantly improve the performance of your React application. Choosing Boilerplate over create-react-app gives you more control over optimization, allowing for easier implementation of these techniques. JSON routes provide a structured approach to route management, and ultimately, you'll have more customization options to enhance your application's performance and robustness. Code splitting is a powerful technique that tackles this issue by breaking down your app into smaller chunks. The result? A significant performance boost for your users.

Don't forget to like this article and subscribe for further insights! Part 2 of this series will be coming soon, so stay tuned!