Optimizing checklist for a lot of data-CodePudding

So I have a checklist for ~1500 items

here's currently how I do it

  toggleOpenTimeSlot = (timeSlotId) => {
    if (this.isTimeSlotOpened(timeSlotId)) {
      this.setState({
        openedTimeSlots: this.state.openedTimeSlots.filter(
          (id) => id !== timeSlotId
        ),
      });
    } else {
      this.setState({
        openedTimeSlots: [...this.state.openedTimeSlots, timeSlotId],
      });
    }
  };

  isTimeSlotOpened = (timeSlotId) =>
    this.state.openedTimeSlots.includes(timeSlotId);

But this approach is very slow, every time I check a checkbox, it takes more than a second to rerender

I also tried something like this

 toggleOpenTimeSlot = (timeSlotId) => {
    if (this.isTimeSlotOpened(timeSlotId)) {
      this.setState((state) => {
        return {
          ...state,
          openedTimeSlots: {
            ...state.openedTimeSlots,
            [timeSlotId.toString()]: false,
          },
        };
      });
    } else {
      this.setState((state) => {
        const newOpenedTimeSlots = { ...state.openedTimeSlots };
        delete newOpenedTimeSlots[timeSlotId.toString()];

        return {
          ...state,
          openedTimeSlots: newOpenedTimeSlots,
        };
      });
    }
  };

  isTimeSlotOpened = (timeSlotId) =>
    this.state.openedTimeSlots[timeSlotId.toString()];

But it seems the performance gets worse after that

CodePudding user response：

You should try to render it step by step!

Trying to display all the checkboxes at once, is bad practice code.

So, if your user should scroll to see the other check boxes ! you need to just show them just 10 or 20 of them and check if user is at the end of the scroll view, load next 20 checkboxes.

By using this such technique your program will never gets slow.

CodePudding user response：

Make openTimeSlots as Object instead of an Array and use timeSlotId as key and value of that should be true/false.

toggleOpenTimeSlot = (timeSlotId) => {
  this.setState({
    openedTimeSlots: {...this.state.openedTimeSlots, [timeSlotId]: !this.state.openedTimeSlots[timeSlotId]
  });};