42. Efficiently Passing Large Amount of Data within Data Management App using NEXT.js

DMP
During a DMP app development, I bump into many performance issues since I want to…

A) Display chosen data
B) Apply desired data-preprocessing methods

with an ENORMOUS amount of data as soon as possible.
It’s been about 4 months since I’ve joined this development, and I’d like to share what I found that works for me to increase performance.

1. Unify when to get data

When I was reviewing the codes for the feature I’ve added a few months ago, I’ve noticed that I was getting all the information I need on each component, without considering what I already had like the image below.
The person who was developing the component “Data A” was already getting the content from the back-end, but I didn’t notice that so, I kept on getting “Data A” for each of the excerpt tables. 

So instead, I’ve changed my method to pass down the content of “Data A” as well, when opening the component for the excerpt tables. (That looks much better)

2.Use useSelectors()  To Refresh Content
Another problem I usually faced was how to refresh the data content when the user applied some modifications.
Before, like the bad example above, I was activating an API to get data content every time the component was opened.

Instead, for each modification-related API, I made the backend respond the modified content, and in the frontend, update the state which holds the previous data content with that modified content. That will renew the data content which component “Data A” has, which will then pass that data down to the child components. (Like the good example above)

EXAMPLE
For my development, when the user selects a data they want to pre-process, it will trigger an API that calls the content from the backend and store it to a global(-ish?) state.
So, all I have to do is get that state using useSelector() and pass that information as props to the child components.