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>
);
}
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) =>{
...
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