How to avoid nested map for better rendering performance?

Question

I have this nested map that kind render slow after redirection I tried to map only the group and it was really fast, any idea how to get rid of this nesting yet achieve the same results? also could calling the function inside of return causing this dip.....

itemSet =  [
      { id: 1, group: 'A', item : 'someitem' },
      { id: 2, group: 'A',  item : 'someitem' },
      { id: 3, group: 'B',  item : 'someitem' },
      { id: 4, group: 'B', item : 'someitem' },
    ]

const groupItems = (items) =>
  items.reduce((group, items) => {
    if (!group[items.group]) {
      group[items.group] = [];
    }
    group[items.group].push(items);
    return group;
  }, {});

const items = (item) =>
    Object.entries(groupItems(item)).map(([group, items]) => (
      <React.Fragment>
        <group name={group} />
        {items.map((item) => (
          <item
            key={item.id}
            id={item.id}
            item={item.item}
          />
        ))}
      </React.Fragment>
    ));
  return (
    <MuiThemeProvider theme={themeDark}>
      <AppBar />
      <CssBaseline />
      {items(itemSet)}
    </MuiThemeProvider>
  );

Mehul Thakkar · Accepted Answer · 2021-09-26 05:38:12Z

2

I believe your usecase is to render the array of array grouped by group. You will have to use the nested loops but you're missing key attribute in the first map. Try adding key there in the React.Fragment.

const items = (item) =>
    Object.entries(groupItems(item)).map(([group, items]) => (
      <React.Fragment key={group}>
        <group name={group} />
        {items.map((item) => (
          <item
            key={item.id}
            id={item.id}
            item={item.item}
          />
        ))}
      </React.Fragment>
    ));
  return (
    <MuiThemeProvider theme={themeDark}>
      <AppBar />
      <CssBaseline />
      {items(itemSet)}
    </MuiThemeProvider>
  );

Working example on codesandbox

edited Sep 26, 2021 at 5:38

answered Sep 26, 2021 at 4:32

Mehul Thakkar

2,4571 gold badge16 silver badges23 bronze badges

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

4 Comments

Richardson Over a year ago

you think this is causing the dip ? tbh i tried it kind of improved...

Mehul Thakkar Over a year ago

Yep, That's one reason and there is one more. You're not using 2 loops but 3 including the Object.entries. Can put a working codesandbox example. I can check and help you there with a number of loops.

Richardson Over a year ago

link kinda similar

Mehul Thakkar Over a year ago

Updated the example. codesandbox.io/s/ancient-dust-uxq5c?file=/index.js Not a fan of for...in but that is reducing one loop in here.

Collectives™ on Stack Overflow

How to avoid nested map for better rendering performance?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related