Включение отсутствующей зависимости useEffect создаст цикл

Использование React и Firebase.

Создал пользовательский хук, который будет получать данные Firestore из коллекции, он успешно работает, но я получаю предупреждение.

Предупреждение: «У React Hook useEffect отсутствует зависимость: 'q'. Либо включите его, либо удалите массив зависимостей.

Если я добавлю «q» в качестве зависимости для useEffect, это вызовет бесконечный цикл.

import { useState, useEffect } from "react";
import { collection, orderBy, query, getFirestore, onSnapshot } from "firebase/firestore";
const useFirestore = (coll) => { 
const [docs, setDocs] = useState([]);
//init services
const db = getFirestore();
//colletion ref
const colRef = collection(db, coll) 
// queries
const q = query(colRef, orderBy('createdAt', 'desc'))
useEffect( ()=> {
 
// real time collection listiner
const unsub = onSnapshot(q, (snapchat)=> {
 let documents = [];
 snapchat.forEach( (doc) => {
 documents.push({...doc.data(), id: doc.id})
 
 });
 setDocs(documents);
});
return () => unsub();
}, [])
 return {docs};
}
export default useFirestore

Можно ли игнорировать это или я что-то неправильно использую в своем useEffect?

Решение проблемы

Just move setup functions inside useEffect since it will be executed only once.

import { useState, useEffect } from "react";
import { collection, orderBy, query, getFirestore, onSnapshot } from "firebase/firestore";
const useFirestore = (coll) => { 
 const [docs, setDocs] = useState([]);
 useEffect( ()=> {
 //init services 
 const db = getFirestore();
 //colletion ref
 const colRef = collection(db, coll) 
 // queries
 const q = query(colRef, orderBy('createdAt', 'desc'))
 // real time collection listiner
 const unsub = onSnapshot(q, (snapchat)=> {
 let documents = [];
 snapchat.forEach( (doc) => {
 documents.push({...doc.data(), id: doc.id})
 });
 setDocs(documents);
 });
 return () => unsub();
 }, [])
 return {docs};
}
export default useFirestore