so.. i tried some similar answer here but non of theme work, and need to listen to live update from firestore db and i have to work with class component

always get this warning :

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

my code:

class Exchange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      exchangePrice: 0,
      newExchangePrice: "",
    };
    this.updateExchangePrice = this.updateExchangePrice.bind(this);
  }

  updateExchangePrice() {
    const docRef = doc(db, "exchange", "exchange");
    if (
      this.state.newExchangePrice !== "" &&
      this.state.newExchangePrice !== 0
    ) {
      updateDoc(docRef, {
        exchange_price: Number(this.state.newExchangePrice),
      });
      this.setState({ newExchangePrice: "" });
    }
  }
  componentDidMount() {
    const exchanges = collection(db, "exchange");
    onSnapshot(exchanges, (x) => {
      x.docs.forEach((doc) => {
        if (doc.data().exchange_price !== this.state.exchangePrice) {
          this.setState({ exchangePrice: doc.data().exchange_price });
        }
      });
    });

  }