Too many re-renders. React limits the number of renders to prevent an infinite loop | React Native

Question

I am having following code:

import { StyleSheet, View, Text } from 'react-native';

import React, { useState, useEffect } from 'react';



const App = () => {

const [articles, setArticles] = useState([]);
const [loading, setLoading ] = useState(false);
setArticles([{"flight_number":110," ...])
useEffect(()=>{
  setLoading(true);
  var requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };
  fetch("https://api.spacexdata.com/v3/launches/upcoming", requestOptions)
  .then(response => response.text())
 

  //.then(setArticles(response => result))
 .then(result => console.log(result))

 .catch(error => console.log('error', error));

 setLoading(false);

} , []);

if (loading){
    return <></>
  } else {
    return <HomeScreen articles = { articles }/>
 }
};
const HomeScreen = (props) => {
     console.log("articles: ", props.articles);
     return (
      <View>
        {
          props.articles.map((article, index)=>{
            return <Text key = {index}>
            { article.mission_name }
            </Text>
            })
          }
        </View>
      );
    }
 
  export default App;

I am trying to call the setArticles causes the Too many re-renders. React limits the number of renders to prevent an infinite loop

This error is located at: in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39) ...

Answer 1

Below is the working code. Made some changes in the fetch method and UseSate method.

Rendering was wrong setArticles([{"flight_number":110," ...])".

And to have the response to be loaded into the View tag, the JSON response needs to be parsed before using it.


import { StyleSheet, View, Text } from 'react-native';

import React, { useState, useEffect } from 'react';



const App = () => {

const [articles, setArticles] = useState([{"flight_number":110}]);
const [loading, setLoading ] = useState(false);
useEffect(()=>{
  setLoading(true);
  var requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };
  fetch("https://api.spacexdata.com/v3/launches/upcoming", requestOptions)
  .then(response => response.text())
 

  //.then(setArticles(response => result))
 .then(result => 
  setArticles(JSON.parse(result)))

 .catch(error => console.log('error', error));

 setLoading(false);

} , []);

if (loading){
    return <></>
  } else {
    return <HomeScreen articles = { articles }/>
 }
};
const HomeScreen = (props) => {
     console.log("articles: ", props.articles.length);
     return (
      <View>
        {
          props.articles.map((article, index)=>{
            return <Text key = {index}>
            { article.mission_name }
            </Text>
            })
          }
        </View>
      );
    }
 
  export default App;

Answer 2

You should move the initialization to useState hook, you trigger inifite rerender

const App = () => {
  // GOOD, initialize once
  const [articles, setArticles] = useState([{"flight_number":110," ...]);

  // BAD, rerender loop
  setArticles([{"flight_number":110," ...]);
...
}