useFirestoreCollectionQuery3.js

export const useFirestoreCollectionQuery = (path, renderFn) => {
  const [state, setState] = useState(null)

  const collection = useRef(useFirestoreCollection(path))

  useEffect(() => {
    console.log('useEffect')
    return collection.current.onSnapshot(snapshot => {
      const docs = snapshot.docs.map(x => x.data())
      setState(docs)
    })
  }, [collection])

  return state === null ? <div>Loading...</div> : renderFn(state)
}