Event handler function not updating, state undefined inside function scope

Question

I am working on a scheduler app and for that I am using the kalend calendar component library. The usage looks something like that

<Kalend
    onEventClick={onEventClick}
    onNewEventClick={onNewEventClick}
    events={bookings}
    initialDate={new Date().toISOString()}
    hourHeight={60}
    initialView={CalendarView.WEEK}
    disabledViews={[CalendarView.DAY]}
    timeFormat={'24'}
    weekDayStart={'Monday'}
    calendarIDsHidden={['work']}
    language={'en'}
/>

My problem is that I access the userId of the current user inside the handler function onEventClick. This userId is asynchronously provided by a custom hook and is undefined on initial render. Once the userId updates, it isn't updated inside the function scope. I also tried using the useCallback Hook with the userId in the deps Array but with the same result.

My handler function:

const onEventClick = (data: any) => {
    setPopupData(data)
    setEventClicked(true)
    if (userProfile?.id === data.ownerId) {
      setModalOpen(true)
    } else {
      setPreviewOpen(true)
    }
  };

When console logging the userId in the component scope it gets updated (due to the Hook finally fetching the userProfile) but inside the handler function it remains undefined

Answer 1

you should be able to do this using useRef - https://reactjs.org/docs/hooks-reference.html#useref

When you assign userId later with something like

const userIdRef = useRef()

// somewhere in your code
userIdRef.current = userId

, you will be able to access it in onEventClick function.