Efficient Data Storage and Retrieval Strategy in React for High-Performance Enterprise Applications

Question

I'm currently exploring strategies to optimize data storage and retrieval for an enterprise-level application that demands high scalability and performance. In my quest to enhance efficiency, I've considered leveraging React's capabilities such as memoization, PureComponent, and React.memo.

One approach I'm contemplating involves storing application data within DOM elements and accessing it via a ref. Here's a snippet showcasing my approach:

<div
  ref={myRef}
  data-my-data={myData}
>
  <MyReactComponents />
</div>

I'm interested to know if this methodology aligns with best practices for achieving performance, maintainability, and scalability in React applications. Specifically, I'm seeking insights into the following:

1. Will storing data in DOM elements as demonstrated above improve efficiency?
2. What potential challenges might arise in terms of scaling and maintainability?
3. Are there alternative strategies or optimizations I should consider for achieving optimal performance in an enterprise context?

Any guidance or recommendations from experienced React developers would be greatly appreciated. Thank you!

Answer 1

Frame challenge: Performance Is NOT a goal

If you're asking in the abstract as an academic exercise, sure fine whatever, but you explicitly structured this as being about an enterprise app. Performance is not a business goal. Increasing revenue and reducing costs are business goals. Performance is useful if and only if it furthers those goals, and only to the degree it furthers those goals. As for that, well...

I'm the frontend architect for a large e-commerce React app that does about 10 billion USD per year in revenue. The short answer is that there isn't a short answer. At that scale the only answer is "test everything", no generic internet advice is going to really help you.

Now sure, in our case there is a measurable correlation between e.g. Google core web vitals metrics and income. But you can't just assume Moar Performance === Moar $$$, for instance in terms of pure conversion rates for us CSR beats SSR (counterintuitively) by about 200 basis points. Should you forget about SSR then? Not unless your customer base is exactly like ours! And even for our customers there's a significant subset that are better served by SSR. Don't assume, measure measure measure!

If you aren't set up to track those kind of metrics then forget about JS micro-optimizations and go do that first. If you are already set up to track those metrics, then why are you asking us?