Question 170879 in Javascript Question posted in
A very good W3school tutorial can be found here.

Does Javascript’s recursive loop throw an Error if page re-renders too many times?

I have page with few forms components as defined below, everything in front works fine, however if I look my console logs the function Fetchmovies is continuously being executed and throws

caught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Even without error this is undesirable I don’t want to make hundreds of calls to the API url. My requirment is just to call the Fetchmovies function once the page loads first time and update Autocomplete component with the returning array. ButI am not sure, why my page is rendered recursively.

import React, { useState } from 'react';

function GetMovies() {
  var [movies_list, setMovies_list] = useState([]);

  async function Fetchmovies() {

    try {
      movies_list = await fetch(url, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'authorization':'token'
        },
      }).then(response => movies_list = response.json());
      console.log(movies_list);
    } catch (e) {
      console.log(e);
    }
  }
  Fetchmovies().then(setMovies_list(movies_list));

  return (
    <Card>
      <Divider />
      <CardContent>
            <Autocomplete
              id='movies'
              name='movies'
              getOptionLabel={(movies_list) => movies_list.service_name}
              multiple
              options={movies_list}
              renderInput={(params) => <TextField {...params} label='Impacted movies:' />}
            />
      </CardContent>
    </Card>
  );

}
export default GetMovies;
Tags:

2

Answers


  1. 0

    You should use useEffect but there are some errors on your fetch and the use of state.

    Check here what you can do instead:

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

function GetMovies() {
  var [movies_list, setMovies_list] = useState([]);

  async function Fetchmovies() {
    try {
      const res = await fetch(url, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'authorization':'token'
        },
      });
      const data = await res.json();
      setMovies_list(data);
    } catch (e) {
      console.log(e);
    }
  }

  useEffect(() => {
    Fetchmovies();
  }, [])

  return (
    <Card>
      <Divider />
      <CardContent>
            <Autocomplete
              id='movies'
              name='movies'
              getOptionLabel={(movies_list) => movies_list.service_name}
              multiple
              options={movies_list}
              renderInput={(params) => <TextField {...params} label='Impacted movies:' />}
            />
      </CardContent>
    </Card>
  );

}
export default GetMovies;
    Login or Signup to reply.
  2. 0

    This line

    Fetchmovies().then(setMovies_list(movies_list));

    updates state … which causes the component to reload .. which calls Fetchmovies again etc.

    Wrap your Fetchmovies call un a useEffect hook.

    useEffect(() => {
    Fetchmovies().then(setMovies_list(movies_list));
}, [])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search