Slow rendering when changing the state of renderItem.

[jeancarlos-cpu]

Greetings! I have a carousel with up to 10 calendars (datepicker). When a date is selected, it should be added to a list and highlighted on the calendar. However, there's a 3-second delay in rerendering (only when using with the carousel). How can I optimize this? Here is a simplified version:

type User = {
  id: number;
  dates: Date[];
};

export default function Screen() {
  const [users, setUsers] = useState<User[]>(arrOfUsers);

  async function handleAddDate({ userId, date }) {
    setUsers((prev) => {
      const user = prev.find((user) => user.id === userId);
      const newDates = [...user.dates, date];
      const updatedUser = { ...user, dates: newDates };

      return prev.map((user) => (user.id === userId ? updatedUser : user));
    });
  }

  return (
      <Carousel
        data={users}
        renderItem={({ item }) => (
          <Calendar
            activeDates={users.dates}
            onDatePress={(date) => handleAddDate({ userId: item.id, date })}
          />
        )}
        mode="parallax"
        pagingEnabled
        loop
      />
  );
}

[jeancarlos-cpu]

So, after refactoring, I moved the state update to the component itself. It requires extra API calls, but will do the trick for now.