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

Question

<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

Dharmik Patel · Accepted Answer · 2022-03-15 07:36:32Z

2

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.

answered Mar 15, 2022 at 7:36

Dharmik Patel

1,2768 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sumit Singh Jodha Over a year ago

is there any other solution other than pagination???

Dharmik Patel Over a year ago

There is one other way. As you know react takes time when trying to render for the first time. So what you can do is the first time website loads you can fetch the data in useEffect and store it in the state and then you can render it whenever you want and it won't take much time because it is already in your state.

Sumit Singh Jodha Over a year ago

that's what i m doing but still getting issues

Dharmik Patel Over a year ago

You can implement infinite scroll in your component. npmjs.com/package/react-infinite-scroll-component

Vikrant Bhat · Accepted Answer · 2022-03-15 07:48:29Z

0

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.

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

Also check this blog for more options and explanation.

answered Mar 15, 2022 at 7:48

Vikrant Bhat

2,6384 gold badges19 silver badges33 bronze badges

Comments

Art · Accepted Answer · 2022-03-15 07:59:03Z

0

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

answered Mar 15, 2022 at 7:59

Art

4614 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related