Problems with the "app bridge" pos cart

[hashi_ws]

Cart data acquisition process does not stop from POS
So it takes a lot of time for the button click to be executed.
How can I stop the cart data acquisition process?

import React from 'react';
import ReactDOM from 'react-dom';

import createApp from "@shopify/app-bridge/development";
import { Features, Cart, Group, Toast, Pos } from "@shopify/app-bridge/actions";
import { Provider, TitleBar } from "@shopify/app-bridge-react";

import "@shopify/polaris/dist/styles.css";

class Testpoint extends React.Component {
    constructor(props) {
		super(props);
		console.log("data from component", JSON.parse(this.props.data));

		this.closeApp = this.closeApp.bind(this);
		this.getCartData = this.getCartData.bind(this);
		this.setCartData = this.setCartData.bind(this);

		this.state = {
			res: "",
		}
	}

	closeApp() {
		console.log("function: closeApp");

		const data = JSON.parse(this.props.data);
		const apiKey = data["apiKey"];
		const shopOrigin = data["shop"];
	
		const app = createApp({
			apiKey: apiKey,
			shopOrigin: shopOrigin,
		});
		const pos = Pos.create(app);
		pos.dispatch(Pos.ActionType.CLOSE);
	}

	getCartData() {
		let vm = this;

		console.log("function: getCartData");

		const data = JSON.parse(vm.props.data);
		const apiKey = data["apiKey"];
		const shopOrigin = data["shop"];
	
		const app = createApp({
			apiKey: apiKey,
			shopOrigin: shopOrigin,
		});

		var cart = Cart.create(app);
		console.log('Cart.Action.UPDATE');
		
		var unsubscriber = cart.subscribe(Cart.Action.UPDATE, function (payload) {
			console.log('[Client] fetchCart', payload);
			unsubscriber();
			vm.setCartData(payload.data);
		});

		app.featuresAvailable(Group.Cart).then(function (state) {
			var _ref = state.Cart && state.Cart[Cart.Action.FETCH],
				Dispatch = _ref.Dispatch;
			if (Dispatch) {
				console.log("Dispatch: cart.dispatch(Cart.Action.FETCH)")
				cart.dispatch(Cart.Action.FETCH);
			} else {
				var toastOptions = {
					message: 'Cart is not available',
					duration: 5000,
					isError: true
				};
				var toastError = Toast.create(app, toastOptions);
				toastError.dispatch(Toast.Action.SHOW);
			}
		});
	}

	setCartData(data) {
		console.log("function: setCartData");
		this.setState({res: JSON.stringify(data.customer)})
	}


    render() {
		let vm = this;
		const data = JSON.parse(this.props.data);
		const apiKey = data["apiKey"];
		const shopOrigin = data["shop"];
		const config = {
			apiKey: apiKey,
			shopOrigin: shopOrigin,
		};

		this.getCartData();

		return (
			<Provider config={config}>
				<h2>{this.state.res}</h2>
				<button onClick={() => this.closeApp()}>close</button>
		  	</Provider>
		);
	}
}


export default Testpoint;

[hashi_ws · Accepted solution]

I'm sorry, I solved it
It worked correctly by setting the state to once.
Thank you.

	setCartData(data) {
		if (this.state.isConfigured==false) {
			console.log("function: setCartData");
			this.setState({res: JSON.stringify(data.customer)})
			this.setState({isConfigured: true})
		}
	}