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

Question

I'm trying to create a logged-in session (when the user refreshes the browser) connect to the firebase realtime database.

It's working but I keep getting this error.

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

My app.js

import React from 'react';

import { UserProvider } from './model/UserContext'


function App() {

  return (
    <div>
      <UserProvider>
      <Session />
       <NavBar />
        <Container maxWidth="sm">
         <Router>
         <Route path='/Login' component={Login}  />
         <Route path='/Dashboard' component={Dashboard}  />
         </Router>
       </Container>
      </UserProvider>
    </div>
  );
}

export default App;

My UserContext.js

import React, { useState, createContext } from 'react'
import Firebase from 'firebase'

export const UserContext = createContext();

//export const UserProvider = UserContext.Provider
//export const UserConsumer = UserContext.Consumer
// export default UserContext

export const UserProvider = props => {
  const[user, setUser] = useState(
    {
      username:"blank",
      loggendIn: false
    }
  );


  var id = localStorage.getItem('id');
  // check if its null
  console.log(id);

  if(id != null){
    console.log('id is there');
    // load user from realtime database
    const dbOBJ = Firebase.database().ref().child("users").child(id);

    dbOBJ.on('value', function(snapshot){
      setUser(snapshot.val());
    });

  }else{
    console.log('no id :( ');
  }



  return(
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    < /UserContext.Provider>
  );
}

Answer 1

I would say use the useState hook.

Your UserContext.js

import React, { useState, createContext, useEffect } from 'react'
import Firebase from 'firebase'

export const UserContext = createContext();

//export const UserProvider = UserContext.Provider
//export const UserConsumer = UserContext.Consumer
// export default UserContext

export const UserProvider = props => {
  const[user, setUser] = useState(
    {
      username:"blank",
      loggendIn: false
    }
  );


  var id = localStorage.getItem('id');
  // check if its null
  console.log(id);
useEffect(() => {
  if(id != null){
    console.log('id is there');
    // load user from realtime database
    const dbOBJ = Firebase.database().ref().child("users").child(id);

    dbOBJ.on('value', function(snapshot){
      setUser(snapshot.val());
    });

  }else{
    console.log('no id :( ');
  }
},[id]) // <==== this will call useEffect again if your id changes



  return(
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    < /UserContext.Provider>
  );
}

The reason this error was there because your condition fulfilled and you called setState which cause a re-render and it happened again thus causing an infinite loop.