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

Question

How do I prevent the following error:

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

I just changed a class based component to functional component and its not working

My source code

import React, {Fragment, useState} from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './Components/Layout/Navbar';
import Users from './Components/users/Users';
import User from './Components/users/User';
import Search from './Components/users/Search';
import Alert from './Components/Layout/Alert';
import About from './Components/pages/About';
import './App.css';
import Axios from 'axios';



const  App  = () => {
 const [users, setUsers] = useState( [] );
 const [user, setUser] = useState( {} );
 const [repos, setRepos] = useState( [] );
 const [loading, setLoading] = useState( false );
 const [alert, setAlert] = useState( null );


// Search Github Users
  const  searchUsers = async text  => {
    setLoading(true);

    const res = await Axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);

   setUsers(res.data.items);
   setLoading(false);   
  };


  // GEt single github user
  const  getUser = async username => {
    setLoading(true);

    const res = await Axios.get(`https://api.github.com/users/${username}?&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);

    setUser(res.data);
    setLoading(false);
  };

  // Get users repos
  const  getUserRepos = async username => {
    setLoading(true);

    const res = await Axios.get(`https://api.github.com/users/${username}/repos?per_page=5&sort=created:asc&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);

    setRepos(res.data);
    setLoading(false);

  };

  // Clear users from state
  const  clearUsers = () => 
  setUsers([]);
  setLoading(false);

  // Set ALert
  const  showAlert = (msg, type) => { 
   setAlert({msg, type});

  setTimeout(()=> setAlert(null),3000);
  };

    return (
      <Router> 
      <div className="App">
       <Navbar />
       <div className="container">
          <Alert alert={alert} />
          <Switch>
          <Route exact path='/' render={props => (
            <Fragment>
                <Search 
                searchUsers={searchUsers} 
                clearUsers={clearUsers} 
                showClear={ users.length>0? true : false } 
                  setAlert={showAlert} 
                />
                <Users loading={loading} users={users}  />
          </Fragment>
          )} />
          <Route exact path = '/about'  component={About} />
          <Route exact path= '/user/:login' render={props => (
            <User 
            {...props} 
            getUser={getUser} 
            getUserRepos={getUserRepos} 
            user={user} 
            repos={repos}
            loading={loading} />
          )} />
          </Switch>
       </div>
      </div>
    </Router>
    );
}

export default App;

I just change a class based component to functional component and i get these error.

0

How do I prevent the following error:

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

Answer 1

As from the comment,

There was error in the declaration of function clearUsers

 const clearUsers = () => setUsers([]);
 setLoading(false);

which should be.

 const clearUsers = () => { 
   setUsers([]);
   setLoading(false);
 }

because of this small typo. The setLoading function was being called on the first render which would then call setLoading triggering react to call render again and in return call setLoading and caused the infinite renders.

Answer 2

I experienced the same error. I found my problem was having brackets at the end of a function() . Yet the function should have been called without brackets. Rookie error.

Before:

onClick={myFunction()}

After:

onClick={myFunction}

If you are using a button also check the caps of your 'onclick'.