3

I have FullCalendar configured for my React site. Everything works fine except for having too frequent refetching from server. In below example (which I have simplified), I change Redux state from a different component which logs out 'hello' in the console. Everytime it happens, I also get 'getting resources' logged out (in the usual environment this is an API call). Same happens for event refetching.It also happens every time any state variable in the component changes. Ideally, I want FullCalendar to fetch events on initialization only and refetch them manually or when navigating on the actual calendar. I don't need it refetched every time anything happens on the page/component. Is that possible?

export default function CalendarPlanner(){
    const reduxState = useSelector(state => state.calPlanner);


    const getResources = () => {
        console.log('getting resources');
    };

    useEffect(() => {
        console.log('hello');
    }, [reduxState]);


    return (
            <FullCalendar plugins={[resourceTimelinePlugin, interaction, dayGridPlugin]}
                          resources={getResources}
            />
}
blitz
  • 623
  • 5
  • 18

1 Answers1

1

As per cbr's comment:

Does it re-render if you use useCallback for getResources? – cbr

Wrapping the function in useCallback resolves the issue.

FullCalendar takes a big number of parameters, most of which are constants, but some are functions. The functions get re-declared every render in React which causes the calendar component to see them as new functions and reinitialize. I now have the following code:

<FullCalendar
    {...calendarParams}
    resources={getResources}

/>

Here, calendarParams are all constant parameters that are outsourced not to clutter the code, while the the function is 'memoized' (wrapped in useCallback). This way, it stays constant and the calendar is not re-rendered unnecessarily.

blitz
  • 623
  • 5
  • 18