Использовать хук внутри функции

Да, как вы заметили, в функциях нельзя использовать хуки. Перехватчики React можно вызывать только внутри функционального компонента или из другого пользовательского перехватчика. Поэтому, имея дело с возвратами, отличными от JSX, вы должны создать еще один крючок, из которого вы сможете вызывать нужные вам хуки. Итак, в этом случае вы, скорее всего, напишете что-то вроде

export function useCalculatePercentage(startDate, endDate) {
  const { timelineStart, timelineLength, timelineScale } = useContext(
    TimelineSettingsContext,
  );
  // ...
  return { startPosition, width };
}

И тогда у вас есть новый крючок, который вы можете использовать для получения нужного вам процентного значения. И это снова необходимо вызвать на верхнем уровне в функциональном компоненте или другом хуке.

В вашем случае, когда вы используете useCalculatePercentage, он не будет работать должным образом или будет выдавать предупреждения. Вы должны вызывать перехватчик на верхнем уровне функции, чтобы не было циклов и обратных вызовов, просто где-то здесь.

const Timeline = () => {
  const { groupedBookings, dates, setSelectedBooking } = useContext(
    TimelineSettingsContext
  );
  //<--- call hook


  function handleBookingSelected(booking) {
    setSelectedBooking(booking.LfdNr);
  }

  //<--- or  here

Я думаю, что это как-то связано с тем, как реакция отслеживает хуки, поэтому, по сути, одна из главных вещей заключается в том, что количество вызовов хука должно быть одинаковым для всех рендереров и даже иногда вызывать хуки на картах и ​​т. д., как в вашем примере. может выдавать постоянное количество вызовов перехвата в течение необходимого периода времени, но это не гарантия, поэтому реакция предупреждает об этом. Так что это как бы противоречит дизайну реагирования, поэтому не стоит головной боли.

В вашей ситуации для первого вызова легко переместить вызов в перехватчик за пределами любых обратных вызовов, поскольку аргументами являются только текущая дата, поэтому она одинакова для всех элементов, которые будут повторяться в функции карты. Но второй обратный вызов более сложен. Но если вы хотите использовать здесь хук, вы можете вернуть функцию из хука. Таким образом, по сути, сам хук может получить все переменные, необходимые для реакции, поэтому другие хуки, включая значения контекста, как в вашем случае, возвращают функцию, которая принимает обычные переменные, а затем возвращает значение. Так может выглядеть что-то вроде

export function useCalculatePercentageWithContext() {
  const { timelineStart, timelineLength, timelineScale } = useContext(
    TimelineSettingsContext,
  );

  const calculatePercentage = (start, end) => {
    //...
    return { startPosition, width };
  };
  return calculatePercentage;
}

и поскольку вычисление процента — это обычная функция, вы можете вызывать ее где угодно, поэтому используйте ее как

const Timeline = () => {
  const { groupedBookings, dates, setSelectedBooking } = useContext(
    TimelineSettingsContext
  );
  const calculatePercentage = useCalculatePercentageWithContext();

  //....

{category.bookings.map((booking, idx) => {
     const { startPosition, width } = calculatePercentage(
        new Date(booking.Beginn_Datum),new Date(booking.Ende_Datum))...}

И это будет работать нормально, но, на мой взгляд, наличие всех этих хуков может быстро надоесть, и каждый раз, когда вы хотите добавить какую-то функциональность, вам придется создавать еще один крючок, использующий несколько хуков и т. д.

Если бы я проводил рефакторинг, я бы вызвал контекстный хук в компоненте, имел бы где-нибудь нормальную функцию и просто передал бы ей аргументы, в том числе из контекста. Что-то вроде

export function calculatePercentage({
  timelineStart,
  timelineLength,
  timelineScale,
  startDate,
  endDate,
}) {
  ///... logic
  return { startPosition, width };
}

затем в временной шкале

const { timelineStart, timelineLength, timelineScale } = useContext(
  TimelineSettingsContext,
);

и

{category.bookings.map((booking, idx) => {
  const { startPosition, width } = calculatePercentage({
     start:new Date(booking.Beginn_Datum),
     end:new Date(booking.Ende_Datum),
     timelineStart,
     timelineLength,
     timelineScale,
  });

и я думаю, что так будет намного проще.