Skip to main content
cuerpo editado
Origen Enlace

comunidadComunidad de Stack Overflow,

comunidad de Stack Overflow,

Comunidad de Stack Overflow,

Origen Enlace

Warning: React Hook useEffect has missing dependencies

comunidad de Stack Overflow,

Estoy trabajando en un proyecto de Next 14 y me encontré con algunas advertencias relacionadas con las dependencias de mi hook y en un componente random. Estoy utilizando useEffect y useCallback, y recibo advertencias sobre dependencias que faltan:

./src/components/app/ScheduleSelector.tsx
    87:6  Warning: React Hook useEffect has missing dependencies: 'selectDate' and 'serviceDate'. Either include them or remove the dependency array. If 'selectDate' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./src/hooks/useAvailability.tsx
    56:5  Warning: React Hook useCallback has a missing dependency: 'endDate'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
    61:6  Warning: React Hook useEffect has a missing dependency: 'loadSlots'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
    67:6  Warning: React Hook useEffect has a missing dependency: 'loadAvailability'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

Mi problema es que, si agrego estas constantes como dependencias, cambia el comportamiento del componente. Necesito que el efecto se ejecute solo cuando el componente se monta y no en cada actualización.

"use client";

import { useEffect, useState, useCallback, use } from "react";
import { AvailableSlot } from "@/services/AppointmentsService";
import * as ServerAppointmentService from "@/services/ServerAppointmentService";
import { SlotCheck } from "@/services/SlotsService";

export function useAvailability({
  date,
  service,
  endDate,
}: {
  date: Date | undefined;
  service: { id: string; staffId: string | undefined };
  endDate?: Date;
}) {
  const [availability, setAvailability] = useState<AvailableSlot[]>([]);
  const [slots, setSlots] = useState<SlotCheck[]>([]);
  const [loading, setLoading] = useState(false);

  const loadAvailability = useCallback(
    async (date: Date) => {
      setLoading(true);
      try {
        const data = await ServerAppointmentService.getAvailability({
          date,
          service,
        });
        setAvailability(data);
      } catch (error) {
        console.error("Error loading availability", error);
      } finally {
        setLoading(false);
      }
    },
    [service],
  );

  const loadSlots = useCallback(
    async (date: Date) => {
      setLoading(true);
      try {
        const data = await ServerAppointmentService.getSlotsAvailability({
          startDate: date.toISOString(),
          endDate: endDate?.toISOString(),
          staffId: service.staffId,
          serviceId: service.id,
        });
        setSlots(data);
      } catch (error) {
        console.error("Error loading availability", error);
      } finally {
        setLoading(false);
      }
    },
    [service],
  );

  useEffect(() => {
    loadSlots(new Date());
  }, [date]);

  useEffect(() => {
    if (date) {
      loadAvailability(date);
    }
  }, [date]);

  return {
    availability,
    loading,
    loadAvailability,
    slots,
  };
}

¿Alguna sugerencia aparte de deshabilitar el lint?

Gracias de antemano por cualquier información. Saludos comunidad.