Error: Chats(...): Nothing was returned from render. This usually means a return statement is missin-CodePudding

The main error is in useEffect function its throwing error

i was creating a web chat aplication by following this yt - https://www.youtube.com/watch?v=Bv9Js3QLOLY&list=PL4nE3wz01AwBbgaAMROTVrhE4aTFRJx7x&index=8

http://localhost:3000/static/js/main.chunk.js:356:7

view source (the error is)

 353 | Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
  354 |   _firebase__WEBPACK_IMPORTED_MODULE_2__["auth"].onAuthStateChanged(user => {
  355 |     setUser(user);
> 356 |     setLoading(false);
  357 |    ^if (user) history.push('/Chats');
  358 |   });
  359 | }, [user, history]);

view compiled

   useEffect(() =>{
        auth.onAuthStateChanged((user) =>{
            setUser(user);
            setLoading(false);
            if(user) history.push('/Chats'); 
             
        })

    },[user ,history]);

AND THE WHOLE CODE IS DOWN BELOW

import { useHistory } from 'react-router-dom';
import { auth } from '../firebase';




const AuthContext = React.createContext();

export const useAuth =() => useContext(AuthContext) ;

export const AuthProvider =({ children }) =>{

    const[loading, setLoading] = useState(true); 
    const[user, setUser] = useState(null);
    const history = useHistory();


    useEffect(() =>{
        auth.onAuthStateChanged((user) =>{
            setUser(user);
            setLoading(false);
            if(user) history.push('/Chats'); 
             
        })

    },[user ,history]);


    const value = { user };


    return(
         <AuthContext.Provider value={value}>
             {!loading && children}
         </AuthContext.Provider>
    );

}

CodePudding user response：

Your useEffect should return a function, which React will then run when it unmounts the component. Luckily that is precisely the type of function that auth.onAuthStateChanged returns, so you can do:

return auth.onAuthStateChanged((user) =>{
  ...

CodePudding user response：

i think your useEffect is throwing an error because you are running it every time history change and inside the useEffect you are changing history so it creates a loop and thats an error, comment the error here so it will be more easy to someone to help