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