Optimizing Rendering Performance for the Shoe Model Grouping Admin Panel

Our team created an admin panel for FitLab, a specialized team focused on shoe and fit data at Perfitt, to efficiently group representative shoe models.

This admin panel is designed to allow the convenient grouping and modification of numerous shoe model datasets.

Grouping representative models helps to organize similar products, making it easier for the FitLab team to access essential shoe data, which was a primary development goal.

However, we faced performance issues in the early stages of development and explored various solutions to address them.

What Led to the Need for Performance Optimization?

The FitLab team manages a large volume of shoe data to recommend models tailored to customers' foot shapes. This data includes information on various shoe types, brands, and other specifications, all of which need to be systematically stored and managed.

With tens of thousands of records, handling large datasets became essential.

The initial version of the admin panel loaded all data entries at once, resulting in a sluggish and delayed scrolling experience.

This significantly impacted the user experience and reduced work efficiency.

How Did We Optimize Performance with the Windowing Technique?

After investigating potential solutions, we discovered the ‘windowing’ technique recommended by React's official documentation for rendering long lists.

Windowing allows only the visible portion of the data to be rendered, minimizing strain on browser performance.

To implement this, we utilized the react-window library. Since each row in our dataset varied in height, we selected the VariableSizeList component, which dynamically adjusts row heights, making it ideal for handling data of varying sizes.

Here’s an example of the VariableSizeList from the react-window documentation:

(Reference: react-window documentation)

import { VariableSizeList as List } from 'react-window';
 
// These row heights are arbitrary.
// Yours should be based on the content of the row.
const rowHeights = new Array(1000)
  .fill(true)
  .map(() => 25 + Math.round(Math.random() * 50));
 
const getItemSize = index => rowHeights[index];
 
const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);
 
const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={getItemSize}
    width={300}
  >
    {Row}
  </List>
);

What Were the Performance Improvements?

After applying this optimization, scrolling became instantly responsive, and the initial load time was significantly reduced. Previously, there was noticeable lag during scrolling, but thanks to the windowing technique, this issue was entirely resolved.

The following image shows the smooth scrolling performance we achieved:

How Has This Optimization Benefited the fitLab Team?

The FitLab team can now group and manage shoe data far more efficiently. With an intuitive and fast-working environment, productivity has noticeably improved, and the team has shared positive feedback on the improved performance.

What’s Next for Further Optimization?

We plan to implement further performance improvements to handle even larger datasets smoothly. Specifically, we aim to enhance data filtering and sorting functions to allow the FitLab team to access needed data even faster.

If you’re facing similar large data challenges, consider react-window and the windowing technique. They’re incredibly helpful solutions for efficiently rendering long lists.

Reference

https://web.dev/articles/virtualize-long-lists-react-window?hl=ko

https://github.com/bvaughn/react-window

https://react-window.vercel.app/#/examples/list/variable-size