Too many re-renders in react native app, what can I do?

Question

I have a react native app with expo-client and gives a too-many re-renders error I will post the files, notice that I use react-native-paper .

This is App.js which is a wrapper for app

import React from "react";
import { Provider as PaperProvider, DefaultTheme } from "react-native-paper";
import { StatusBar } from "expo-status-bar";
import Homescreen from "./views/screens/homescreen";
//import { SafeAreaView, Text } from "react-native";

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <Homescreen />
      <StatusBar />
    </PaperProvider>
  );
}
const theme = {
  ...DefaultTheme,
};

This is the homescreen which is a wrapper for login and sign up components

import React from "react";
import { View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import SignUp from "../components/signup";
import Login from "../components/login";
import { Button } from "react-native-paper";

export default function Homescreen({ navigation }) {
  const Stack = createStackNavigator();
  return (
    <View>
      <Button onPress={() => navigation.navigate("SignUp")}>SignUp</Button>
      <Button onPress={() => navigation.navigate("LogIn")}>Login</Button>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="SignUp" component={SignUp} />
          <Stack.Screen name="LogIn" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

There are sign up and login components which are very identical

import React, { useState } from "react";
import { View } from "react-native";
import { TextInput, Button } from "react-native-paper";

export default function SignUp() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const signUp = (t1, t2) => {
    setEmail("");
    setPassword("");
  };
  const changeEmailHandler = (e) => {
    setEmail(e.target.value);
  };
  const changePasswordHandler = (e) => {
    setPassword(e.target.value);
  };
  return (
    <View>
      <TextInput
        mode="outlined"
        left
        label="email"
        placeholder="Enter your email: "
        onChangeText={changeEmailHandler}
        value={email}
      />
      <TextInput
        mode="outlined"
        left
        label="password"
        placeholder="Enter your password: "
        onChangeText={changePasswordHandler}
        value={password}
        type="password"
      />
      <Button
        icon="arrow-right-alt"
        mode="contained"
        onClick={signUp(email, password)}
      >
        Join us now
      </Button>
    </View>
  );
}
import React, { useState } from "react";
import { View } from "react-native";
import { TextInput, Button } from "react-native-paper";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const logIn = (t1, t2) => {
    setEmail("");
    setPassword("");
  };
  const changeEmailHandler = (e) => {
    setEmail(e.target.value);
  };
  const changePasswordHandler = (e) => {
    setPassword(e.target.value);
  };
  return (
    <View>
      <TextInput
        mode={outlined}
        left
        label="email"
        placeholder="Enter your email: "
        onChangeText={changeEmailHandler}
        value={email}
      />
      <TextInput
        mode={outlined}
        left
        label="password"
        placeholder="Enter your password: "
        onChangeText={changePasswordHandler}
        value={password}
        type="password"
      />
      <Button
        icon="arrow-right-alt"
        mode="contained"
        onClick={logIn(email, password)}
      ></Button>
    </View>
  );
}

This is the appbar component

import React from "react";
import { View } from "react-native";
import { Appbar } from "react-native-paper";

export default function CustomAppBar() {
  return (
    <View>
      <Appbar>
        <Appbar.Header>
          <Appbar.Content title="Date Planner" />
        </Appbar.Header>
      </Appbar>
    </View>
  );
}

Answer 1

The onClick event in the <Button> is the problem. It calls signUp(email, password) on every render which causes an infinite loop because inside there is a call for setPassword . Instead in onClick you can pass a callback, see my suggestion below.

You need to modify your button as:

<Button
        icon="arrow-right-alt"
        mode="contained"
        onClick={() => signUp(email, password)}
      >
        Join us now
</Button>

In this way the signUp function will be called only on click event.

Based on the comment also needs to change onClick={logIn(email, password)} as well similarly as suggested above.