Ackermann Function in React Native very slow

Question

I want top calculate the Ackermann Function and the Power of a number iterative.

But both functions Work very slow. I already tried an empty App,but it's already slow and I didn't know why. We compare with flutter and Maui. React Native is very very slow in comparance with the other Frameworks. Ist there any Trick to make it faster?

Here ist my App.js:

`

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { Component } from "react";
import {
  Button,
  StyleSheet,
  Text, TextInput,
  View,
} from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View>
        <Ackermann/>
        <Iterative/>
      </View>
    );
  }
}

class Ackermann extends Component {

  constructor(props) {
    super(props);

    this.state = {n: 0, m: 0, result: ""};
  }

  ackermann = (m, n) => {
    if(m === 0) {
      return n+1;
    } else if(n === 0) {
      return this.ackermann(m-1,1);
    } else {
      return this.ackermann(m-1, this.ackermann(m, n-1));
    }
  };

  executeAckermann = async () => {
    try {
      let start = Date.now();
      let result = await this.ackermann(this.state.n, this.state.m);
      let end = Date.now();
      let diff = end - start;
      this.setState({n: this.state.n, m: this.state.n, result: `Result(${this.state.n}, ${this.state.m}): ${result}, Time: ${diff}ms`});
    } catch (ex) {
      this.setState({n: this.state.n, m: this.state.m, result: `Result(${this.state.n}, ${this.state.m}): ${ex.message}`});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>Ackermann-Funktion</Text>
        <TextInput style={styles.textInput} placeholder={'n'} value={this.state.n} onChangeText={text => this.state.n=Number(text)}/>
        <TextInput style={styles.textInput} placeholder={'m'} value={this.state.m} onChangeText={text => this.state.m=Number(text)}/>
        <Button style={styles.textInput} title={'Ackermann-Funktion ausführen'} onPress={this.executeAckermann}/>
        <TextInput style={styles.result} editable={false} value={this.state.result}/>
      </View>
    );
  }
}

class Iterative extends Component {
  constructor(props) {
    super(props);

    this.state = {first: 0, second: 0, result: ""};
  }

  plus = (a, b) => {
    let sum = a;
    for(let j = 0; j < b; j++) {
      sum++;
    }
    return sum;
  }

  mal = (a, b) => {
    let sum = 0;
    for(let i = 0; i < a; i++) {
      sum = this.plus(sum, b);
    }
    return sum;
  }

  potenz = (a, b) => {
    let sum = 1;
    for(let i = 0; i < b; i++) {
      sum = this.mal(sum, a);
    }
    return sum;
  }

  executePotenz = async () => {
    try {
      let start = Date.now();
      let result = this.potenz(this.state.first, this.state.second);
      let end = Date.now();
      let diff = end - start;
      this.setState({first: this.state.first, second: this.state.second, result: `Result(${this.state.first}, ${this.state.second}): ${result}, Time: ${diff}ms`});
    } catch (ex) {
      this.setState({first: this.state.first, second: this.state.second, result: `Result(${this.state.first}, ${this.state.second}): ${ex.message}`});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>Iterative Potenzierung</Text>
        <TextInput style={styles.textInput} placeholder={'Erster Wert (Potenzierung)'} value={this.state.first} onChangeText={text => this.state.first=Number(text)}/>
        <TextInput style={styles.textInput} placeholder={'Zweiter Wert (Potenzierung)'} value={this.state.second} onChangeText={text => this.state.second=Number(text)}/>
        <Button style={styles.textInput} title={'Potenzierung ausführen'} onPress={this.executePotenz}/>
        <TextInput style={styles.result} editable={false} value={this.state.result}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    margin: 5,
  },
  header: {
    fontSize: 20,
    textAlign: "center",
    marginBottom: 2,
  },
  textInput: {
    borderColor: 'black',
    borderStyle: 'solid',
    borderWidth: 1,
    marginBottom: 5,
  },
  result: {
    borderWidth: 0,
    margin: 10,
  }
});

`

Greetings Dominic I tried to do all, 20 hours of Googling and I didn't get a good result.