React Component's performance reduce when rendering a large list using array

user_18306019 0
Viewed 734
<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

jsx reactjs javascript
3 Answers

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.

user_104982560
user_117581830
user_167581370
Related