Listen to balance changes wrong after transfer token

Question

I'm facing an issue. I used a query subscription to listen and update the free balance on UI. But I don't know why, when I log free in callback, they always return a balance of receiver and then a balance of the sender

import BigNumber from 'bignumber.js';
import BN from 'bn.js';
import {  useEffect, useState } from 'react';

import { polkadotApiInstant } from '~/polkadot/api';

const useFetchCurrentBanlance = (address: string) => {
  const [balance, setBalance] = useState<BN>();
  const [balanceValue, setBalanceValue] = useState<string>();
  const [loading, setLoading] = useState<boolean>(false);


  const getBalance = async () => {
    setLoading(true);

    const api = polkadotApiInstant as any;

    await api.isReady;
    api.query.system.account(
      address,
      ({ data: { free } }: { nonce: any; data: { free: BN } }) => {
        const valueBN = new BigNumber(free.toString())
          .div(10 ** DECIMAL)
          .toString();
        setBalanceValue(valueBN);
        setBalance(free);

        setLoading(false);
      }
    );
  };
  useEffect(() => {
    getBalance();
  }, [address]);
  return { balance, balanceValue, loading };
};
export default useFetchCurrentBanlance;

Answer 1

Plus, I have a debugger, the reason is the local storage cache. When I switch 2 accounts in one wallet, it's happening