A ver si alguien me podría explicar porque me sale el siguiente warning en las dependencias del useEffect. Este es mi código:
interface Props {
title: string;
eventId: Id;
}
export const ChatDetailPage = ({ title, eventId }: Props) => {
const [messages, setMessages] = useState<Message[]>([]);
const messageService = new MessageService(apiConfig);
const messageRepository = new MessageRepositoryImpl(messageService);
const getMessagesUseCase = new GetMessagesUseCaseImpl(messageRepository);
useEffect(() => {
getMessagesUseCase.getMessages(eventId).then(setMessages);
}, [eventId]);
return (
<section>
<TitleUnderlined>{title}</TitleUnderlined>
<ChatBoard>
{messages.map((message: any) => (
<ChatMessage key={message.id}>
<span>
<Avatar imageUrl={message.user.avatar} size={"xxsmall"} />
</span>
<div>
<p className="name">{message.user.name}:</p>
<p className="message">{message.text}</p>
</div>
</ChatMessage>
))}
</ChatBoard>
</section>
);
};
y este es el Caso de uso de los mensajes:
export interface GetMessagesUseCase {
getMessages(eventId: Id): Promise<Message[]>;
}
export class GetMessagesUseCaseImpl implements GetMessagesUseCase {
constructor(private readonly repository: MessageRepository) {}
getMessages(eventId: string): Promise<Message[]> {
return this.repository.getMessages(eventId).then(res => {
return Promise.resolve(res)
})
}
}
El warning que me da es el siguiente:
React Hook useEffect has a missing dependency: 'getMessagesUseCase'. Either include it or remove the dependency array react-hooks/exhaustive-deps
pero si pongo la dependencia que me solicita, entra en loop infinito.
Me gustaría poder entender el warning que significa y como podría solucionarlo. Muchas gracias de antemano. Saludos.