<div className="listCheckbox">
            {objects.map((e) => {
              return (
                <div key={e.value}>
                  <FormControlLabel control={<Checkbox />} label={e.label} />
                </div>
              );
            })}
          </div>

//css----------------------------------------------------------------------------------
.listCheckbox {
  max-height: 350px;
  overflow-y: scroll;
}

here objects are a state of type array and contain more than 250 records. how can I render this more efficiently with the same styling

CodePudding user response：

You can use pagination and limit the records instead of showing it all. And when you try to render more you can just add it to the previous state, This way you won't lose your previous fetched records and it will be more optimized.

CodePudding user response：

Here are some ways to load large list of data:

Note: I have mentioned some npm libraries within brackets for ease, but these functionalities can be self-implemented as well.

1. pagination (https://www.npmjs.com/package/react-paginate)
2. inifinite scroll (https://www.npmjs.com/package/react-infinite-scroll-component)

Also check this blog for more options and explanation.

CodePudding user response：

In case you're not interested in paginating, you should use a virtual list.

You can use react-virtualized, or try building one from scratch