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
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.
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]
});};