Too Many renders. React Limits the number of renders to prevent infinite loop

Question

am getting an error while running my react native app in expo , my error is Too many renders react limits the number of renders to prevent infinite loop, don't know where am wrong , please try to fix my error. if you have any question please free feel to ask ant time.

Home.js

This is the home.js file where in wrote my all code including css.

import React, { useEffect, useState } from 'react'
import { Text, View, FlatList, StyleSheet, ScrollView, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Searchbar, shadow, Modal, Provider, Portal } from 'react-native-paper';
import { AntDesign } from '@expo/vector-icons';

export default function Home() {

  const [searchquery, setSearchquery] = React.useState();
  const [visible, setVisible] = React.useState(false);

  const showModal = setVisible(true);
  const hideModal = setVisible(false);
  const containerStyle = { backgroundColor: 'white', padding: 20 };

  const [users, setUser] = useState([
    {
      id: 1,
      name: "Ashish Nirvikar"
    },
    {
      id: 2,
      name: "Drew Macntyre"
    },
    {
      id: 3,
      name: "Jonh Cena"
    },
    {
      id: 4,
      name: "Rock Samoa"
    },
    {
      id: 5,
      name: "Boby Lashely"
    },
  ])

  return (
    <View >
      <Searchbar
        placeholder="Search Contacts"
        onChangeText={(query) => setSearchquery(query)}
        value={searchquery}
        style={{ marginTop: 30, marginHorizontal: 10 }}
      />
      <ScrollView>
        {
          users.map((item, index) => {
            return (
              <View key={index}>
                <Text style={styles.names}>{item.name}</Text>
              </View>
            )
          })
        }
      </ScrollView>
      <Provider>
        <Portal>
          <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
            <Text>Example Modal.  Click outside this area to dismiss.</Text>
          </Modal>
        </Portal>
        <AntDesign name="plus" size={34} color="black" style={styles.plus} onPress={showModal} />
      </Provider>
    </View>
  );
}


const styles = StyleSheet.create({
  customText: {
    padding: 10,
    marginTop: 20,
    textAlign: 'center',
    backgroundColor: 'lightgray',
    fontWeight: 'bold',
    fontSize: 20
  },
  plus: {
    fontSize: 50,
    position: 'absolute',
    top: 680,
    right: 40,
    backgroundColor: 'pink',
    borderRadius: 15,
    borderWidth: 0.5,
    padding: 5,
  },
  names: {
    padding: 15,
    fontSize: 25,
    fontWeight: 'bold',
    backgroundColor: 'lightgray',
    marginTop: 10,
    borderRadius: 20,
    color: 'black'
  }
});

Answer 1

The showModal and hideModal are functions, define it as a function.

const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);