Question 272102 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Rendering taking too much time in reactjs

I am iterating over just 100 documents on page and using a wrapper component for some conditional things.

return (
  <>
    {orders.map(({ order, ...rest }, index) => {
      return (
        <div className="booking-details" key={order.id}>
          <Grid container className="bg-dark" mt={2} alignItems="center">
            <Grid md={6} className="text-left" item>
              <Checkbox id="id1" checked={ordersToExport?.map(({ order }) => order.id).includes(order.id)} className="white" onChange={() => onClickCheckbox({ order, ...rest })} />
            </Grid>
            <Grid md={6} className="text-right" item>
              <ButtonGroup variant="text" aria-label="button group" className="white-btn-group">
                  <>
                    <ActionsAccess btnType="Accept" status={order.status}>
                      <Tooltip title="Accept" placement="top" arrow>
                        <Button size="large" onClick={() => updateOrder(order, 2)}>
                          <CheckIcon />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                    <ActionsAccess btnType={"Accept and open document"} status={order.status}>
                      <Tooltip title="Accept and open document" placement="top" arrow>
                        <Button size="large" onClick={() => onClickAcceptOpen(order, 2)}>
                          <TaskIcon />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                    <ActionsAccess btnType={"Accept and add note"} status={order.status}>
                      <Tooltip title="Accept and add note" placement="top" arrow>
                        <Button size="large" onClick={() => handleChange(`panel${`${index}-note`}`)}>
                          <SmsIcon />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                    <ActionsAccess btnType={"B-Scan"} status={order.status}>
                      <Tooltip title="B-Scan" placement="top" arrow>
                        <Button size="large" onClick={() => handleChange(`panel${`${index}-bscan`}`)}>
                          <SystemUpdateAlt />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                  </>
                <ActionsAccess btnType={"View document"} status={order.status}>
                  <Tooltip title="View document" placement="top" arrow>
                    <Button size="large" onClick={() => window.open(`/mybooking/overview-today/view-pdf?id=${order.id}`)}>
                      <DescriptionIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                <ActionsAccess btnType={"Delete order"} status={order.status}>
                  <Tooltip title="Delete order" placement="top" arrow onClick={() => handleChange(`panel${`${index}-delete`}`)}>
                    <Button size="large">
                      <DeleteIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                  <ActionsAccess btnType={"Reject order"} status={order.status}>
                    <Tooltip title="Reject order" placement="top" arrow onClick={() => handleChange(`panel${`${index}-reason`}`)}>
                      <Button size="large">
                        <CancelIcon />
                      </Button>
                    </Tooltip>
                  </ActionsAccess>
                <ActionsAccess btnType={"View tracking"} status={order.status}>
                  <Tooltip title="View tracking" placement="top" arrow>
                    <Button
                      size="large"
                      onClick={() => {
                        navigate(`/event-tracking?id=${order.id}`);
                        setCount(count + 1);
                      }}
                    >
                      <ZoomInIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                <ActionsAccess btnType="Quick edit" status={order.status}>
                  <Tooltip title="Quick edit" placement="top" arrow>
                    <Button size="large" onClick={() => onClickQuickEdit({ order, ...rest })}>
                      <FlashOnIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                  <ActionsAccess btnType={"Modify order"} status={order.status}>
                    <Tooltip title="Modify order" placement="top" arrow>
                      <Button size="large" onClick={() => navigate(`/edit-order?id=${order.id}`)}>
                        <EditIcon />
                      </Button>
                    </Tooltip>
                  </ActionsAccess>
              </ButtonGroup>
            </Grid>
          </Grid>
        </div>
      );
    })}
  </>
);

Now I am not able to understand why it is taking too much time to check the checkBox on I click. Shouldn’t I use wrapper component here? and go with the just conditional rendering inside the component (which looks code ugly unreadable)

Here is my ActionAccess component.

const enums: Enums = {
  1: [
    "Accept",
    "Accept and open document",
    "Accept and add note",
    "View document",
    "Delete order",
    "Reject order",
    "View tracking",
    "Modify order",
  ],
  2: ["View document", "Delete order", "Reject order", "View tracking"],
  3: ["View document", "Delete order", "View tracking"],
  4: ["View document", "Delete order", "View tracking", "Modify order", "Quick edit"],
  8: ["View document", "Delete order", "View tracking", "Modify order", "Quick edit"],
  5: ["View document", "View tracking"],
  9: ["View document", "Delete order", "View tracking", "Modify order"]
};

export default function ActionsAccess({ children, status, btnType }: props) {
  const feature = enums[status];
  return feature?.indexOf(btnType) !== -1 ? children : null;
}
Tags:

2

Answers


  1. 0

    Use PureComponent or React.memo: If your component doesn’t rely on external props or state, you can use React.PureComponent or React.memo to prevent unnecessary re-renders.

    import React from 'react';

const YourFunctionalComponent = React.memo(function YourComponent(props) 
{
  // ...
});

    something like this

    Login or Signup to reply.
  2. 0

    Considering the limitation of React.memo, consider Bhavya Dhiman‘s suggestion of assigning a key prop to each ActionsAccess component and looping through them using an array.

    That can help React identify which components have changed, been added, or removed, which helps to get more efficient updates.

    Make sure every ActionsAccess component has a unique key prop.

    <ActionsAccess key={btnType} btnType={btnType} status={order.status}>
  {/* */}
</ActionsAccess>

    And create an array of button types and loop through it to render your ActionsAccess components.
    This follows "Rendering Lists", using a map

    const buttonTypes = [
  "Accept",
  "Accept and open document",
  "Accept and add note",
  // other button types
];

return buttonTypes.map(btnType => (
  <ActionsAccess key={btnType} btnType={btnType} status={order.status}>
    {/* */}
  </ActionsAccess>
));

    You would get:

    return (
  <>
    {orders.map(({ order, ...rest }, index) => {
      const buttonTypes = enums[order.status];
      return (
        <div className="booking-details" key={order.id}>
          <Grid container className="bg-dark" mt={2} alignItems="center">
            {/* rest of your component */}
            <Grid md={6} className="text-right" item>
              <ButtonGroup variant="text" aria-label="button group" className="white-btn-group">
                {buttonTypes.map(btnType => (
                  <ActionsAccess key={btnType} btnType={btnType} status={order.status}>
                    {/* render button based on btnType */}
                  </ActionsAccess>
                ))}
              </ButtonGroup>
            </Grid>
          </Grid>
        </div>
      );
    })}
  </>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search