将哪个react钩子与firestore onsnapshot一起使用？

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase.firestore()
      .collection('myCollection')
      .onSnapshot((snapshot) => {
        const updatedData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        setData(updatedData);
      });

    // Cleanup subscription on component unmount
    return () => unsubscribe();
  }, []); // Empty dependency array ensures this runs only once on mount and unmount

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default MyComponent;