Member-only story
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
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.
