`onAuthStateChanged` check is causing an infinate loop and needs to be behind `useEffect`

[owlpaste]

The onAuthStateChanged function is causing an infinite loop because it is called every time the component re-renders, which in turn triggers a state update, which causes the component to re-render again. Instead it should be called once in the component lifecycle, such as in the useEffect hook.

Something like this makes the app work as expected an you are able to use the basic "router" in the example.

   useEffect(() => {
      onAuthStateChanged(auth, (user) => {
         if (user) {
            setLoggedIn(true);
         } else {
            setLoggedIn(false);
         }
      });
   }, []);

Looks like I don't have permissions to push a commit on a branch with this fix. (also you need to add useEffect in import React, { useState, useEffect } from 'react';

PS: I really liked the tutorial, very nice and clear 👍

[atomlabdev]

Hey there,

Thankyou for letting me know and I'm glad you found the tutorial helpful! This is definitely an error - I'll update the article in the next few days.

Cheers

Tom