Setting react component state from within an event handler breaks guide render

[benkovy]

Version

@toast-ui/react-calendar: ^1.0.5

Test Environment

Firefox, Mac OS

Details

Setting state from within the event handler causes the schedule guide to not show up. However... when the calendar and schedule props are not passed in, the calendar functions properly.

I am using react state to keep track of when I should render my custom schedule creation popover. Is this not a pattern I should be using? it seems like the right "React" way to do it - should I be appending my popover element to the DOM from within the handler?

This is a video of with and without the schedules/calendars

https://user-images.githubusercontent.com/18032127/150453618-07bd944f-e6e7-4e98-b157-32ae36f38f2c.mov

Below is some code that should help reproduce the problem.

CODE

```TS import React, {useEffect, useRef, useState} from 'react'; import Cal from '@toast-ui/react-calendar'; import {DateTime} from 'luxon'; const startDate = DateTime.now().minus({hours: 4}); const endDate = startDate.plus({hours: 4}); export function Calendar() { const [count, setCount] = useState(0); return ( { setCount(count + 1); }} /> ); } ```

In summary

• Setting state from within a handler with calendar or schedule = not working
• Setting state from within a handler without calendar or schedule = working

[adhrinae]

@benkovy I think it's a duplicate of #26. Please check this comment. I confirmed that moving calendar and schedule props to the outside of the component works as intended.

import React, { useState } from "react";
import Cal from "@toast-ui/react-calendar";
import { DateTime } from "luxon";

import "tui-calendar/dist/tui-calendar.css";

const startDate = DateTime.now().minus({ hours: 4 });
const endDate = startDate.plus({ hours: 4 });

const calendars = [
  {
    id: "0",
    name: "Private",
    bgColor: "#9e5fff",
    borderColor: "#9e5fff"
  }
];
const schedules = [
  {
    id: "1",
    calendarId: "0",
    title: "TOAST UI Calendar Study",
    category: "time",
    dueDateClass: "",
    start: startDate.toISO(),
    end: endDate.toISO()
  }
];
export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Cal
      defaultView="week"
      taskView={false}
      height="100%"
      disableDblClick={true}
      disableClick={false}
      isReadOnly={false}
      calendars={calendars}
      schedules={schedules}
      onBeforeCreateSchedule={() => {
        setCount(count + 1);
      }}
    />
  );
}

Any PRs improving the current diff comparison logic would be welcome. 🙌

[benkovy]

Yes you are right. Thank you for pointing this out I will take a look at that issue!