Why does my app keep getting re-rendered if i remove the useEffect()?

If I remove the useEffect my app keeps getting rendered and I end up getting the infinite re-renders error. I would like to understand the reason for it and if there is some other way I can implement this same thing without using useEffect.

I would like to add a new text with touchable opacity and call a function from it but I can't right now because if I place the function outside useEffect, I get the error and if I place it inside useEffect I can't call it.

EDIT:

clarification: the function that will be called on clicking the text is supposed to be a new function.

  const Home = () => {          const [restaurants, setrestaurants] = useState([]);       useEffect(() => {      async function getData(){        const Ref = db.collection('restaurants');        const snapshot = await Ref.get();        const restaurantsArray = [];        snapshot.forEach(doc => {          restaurantsArray.push(doc.data());        });        setrestaurants(restaurantsArray);       }          getData();    }, []);      return (    <View>      <FlatList        keyExtractor={restaurants => restaurants.Name}        data={restaurants}        renderItem={({ item }) => {          return (            <View>              <ResContainer                Name={item.Name}                Building={item.Building}              />             </View>          );        }}      />      </View>    );  };  

https://stackoverflow.com/questions/65385927/why-does-my-app-keep-getting-re-rendered-if-i-remove-the-useeffect December 21, 2020 at 07:44AM