How To Handle Large Amounts of Data in React-Based Applications

How To Handle Large Amounts of Data in React-Based Applications

The exponential growth of global data impacts the whole world, including front-end development

The exponential growth of global data impacts the whole world, including front-end development

Introduction

With more than 20 years of experience in the IT industry, I’ve been able to witness from up close how our industry is growing. In this article I will focus on one aspect in particular: the amount of data that’s available to us, how fast this amount is growing, and how this impacts the development of front-end applications with React.

I am fortunate in the sense that I get paid for providing my services to one of the largest IT companies in the world, and I have done so for more than a decade. Today I want to share some knowledge that I’ve gained during these years, both as a developer and manager; knowledge that’s related to the topics that we will explore together:

  • Data structures
  • Parsing and preparing data
  • Rendering data
  • Dynamic data (separate article)

In the context of React development and codebase, we'll have a look at each topic in a dedicated section down below. You will find a little bit more info about global data at the end of this article, with some quotes from IDC and their Global DataSphere measurements.

NOTE: most of our projects use React in their frontend. However, a lot of the examples and concepts down below can easily be transferred to other technologies.

Data Structures

The data that we render in our frontends originates from different sources: databases, files, APIs, and more. If your application is large enough it might come from a combination of several of them.

No matter where it comes from, I strongly recommend keeping your data structures flat when they reach your frontend.

{
    "items": [
        {
            "firstName": "John",
            "lastName": "Doe",
            "orders": [
                {
                    "total": 7490,
                    "products": [
                        {
                            "name": "Wool Hat",
                            "price": 1500
                        },
                        {
                            "name": "Merino Sweater",
                            "price": 2990
                        }
                    ]
                }
            ]
        }
    ]
}

programming javascript angular nodejs

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Updating From Angular 10 to Angular 11

Updating from Angular 10 to Angular 11. In 2020, Angular received three stable update (Version 9, 10, and 11,) each introducing a few significant changes. We’ll focus on the last two, Angular 10 and Angular 11, the rule is currently facing issues, especially for packages like update @angular/core.

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Learn Angular Basics by Building a Simple App Using Angular Material

I currently work as an Angular developer, building tools the employees at my company use to get their jobs done and hopefully enjoy doing them. I only started developing in Angular at the beginning of May this year, but I love front-end work and am so pumped to get the chance to learn this new skill professionally.