title: useEffect running on every render even when dependency is unchanged
body: <p>I am using Firebase auth in a React app. I am getting the error below:</p>
  
  <blockquote>
    <p>Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already 
    exists (app/duplicate-app).</p>
  </blockquote>
  
  <p>I am trying to configure and initialise a Firebase app to make use of the Firebase auth SDK. Using React class base components worked without any errors, but moving over to React Hooks is proving a challenge.</p>
  
  <p>A simple example of where the problem is occurring:</p>
  
  <pre><code>import React, {useState, useEffect} from 'react';
  import './App.css';
  
  import * as firebase from "firebase/app";
  import 'firebase/auth';
  
  const App = () =&gt; {
  
    const [emailVal, setEmailVal] = useState('')
    const [passwordVal, setPasswordVal] = useState('')
  
    const handleChangeEmail = (event) =&gt; {
      setEmailVal(event.target.value);
    }
  
    const handleChangePassword = (event) =&gt;{
      setPasswordVal(event.target.value);
    }
  
    const handleSubmit = (event) =&gt;{
      event.preventDefault();
      const auth = firebase.auth()
      auth.signInWithEmailAndPassword(emailVal, passwordVal)
        .then(response=&gt;{
          console.log(response)
        });
    }
  
    const firebaseConfig = {
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
      databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    };
  
    console.log(firebaseConfig)
  
    useEffect(()=&gt;{
      console.log("useEffect called")
      firebase.initializeApp(firebaseConfig);
    }, [firebaseConfig])
  
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Testing client side authentication&lt;/h1&gt;
  
          &lt;form onSubmit = {handleSubmit}&gt;
            &lt;label&gt;
              Email:
              &lt;input type="text" value={emailVal} onChange={handleChangeEmail} /&gt;
            &lt;/label&gt;
            &lt;label&gt;
              Password:
              &lt;input type="text"  value={passwordVal} onChange={handleChangePassword}/&gt;
            &lt;/label&gt;
            &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>When I place a console.log in useEffect it appears that the useEffect hook runs after the first render, which is good. Then when I type into the text input boxes and the component is re-rendered, the useEffect hook runs again, even though the firebaseConfig variable is unchanged. I suspect that each re-render is actually creating a new version of the firebaseConfig variable that in turn triggers the useEffect hook.
  To overcome this I removed the dependency from the useEffect hook like so:</p>
  
  <pre><code> useEffect(()=&gt;{
      console.log("useEffect called")
      firebase.initializeApp(firebaseConfig);
    }, [])
  </code></pre>
  
  <p>This works well, but I am getting linting warnings:</p>
  
  <blockquote>
    <p>React Hook useEffect has a missing dependency: 'firebaseConfig'. Either 
    include it or remove the dependency array  react-hooks/exhaustive-deps</p>
  </blockquote>
  
  <p>So my next step was to set the firebaseConfig in a useState call. But then I also get linting warnings that the setFirebaseConfig is not being used.</p>
  
  <p>I would comfortably leave the dependencies empty so that that useEffect works like ComponentDidMount but then the linting warnings concern me that I may be causing a problem in my code.</p>
  
  <p>Essentially, if I could somehow compare the actual values in the firebaseConfig and add that to the useEffect dependency I think it would work as the values themselves are unchanging once the app is loaded. Does anyone know how to do this?</p>
  
  <p>Thanks :)</p>