title: How to rerender calendar component on event data change
body: <p>I am using react-big-calendar and getting event data from props (redux connect) from an API . How do I trigger a rerender when the data updates (add/delete or changed) and avoid infinite useEffect loop?</p>
  <p>My code:</p>
  <pre><code>export const SelectableCalendar = (props: CalendarProps) =&gt; {
    const localizer = momentLocalizer(moment);
    const bookedEvents = props.events.bookings;
  
    const eventList = bookedEvents.map((event: CalendarProps) =&gt; {
      return {
        start: moment(event.time.startTime),
        end: moment(event.time.endTime),
        title: event.title,
      };
    });
  
    const [events, setEvents] = useState(
      eventList as CalendarEvent[] 
    );
  </code></pre>
  <p>What do I put in the [?] to rerender when new events are added/removed or changed?</p>
  <pre><code>useEffect(()=&gt;{setEvents(eventList as CalendarEvent[])},[?])
  </code></pre>
  <p>The calendar component is as such:</p>
  <pre><code>      &lt;Calendar
          localizer={localizer}
          events={events}
          defaultView=&quot;month&quot;
          defaultDate={new Date(year, month, day)}
          startAccessor=&quot;start&quot;
          endAccessor=&quot;end&quot;
          titleAccessor=&quot;title&quot;
        /&gt;
  </code></pre>