title: Why do we use Provider and useContext when we can use just a custom hook?
body: <p>Why do we use Provider and useContext when we can use just a custom hook?</p>
  <p>i.e I have a custom hook that provides user data and login/logout fn:</p>
  <pre><code>export default function useAuth() {
      const [userInfo, setUserInfo] = useState(null)
      const [isLoggedIn, setLoggedIn] = useState(false)
    
      const logout = () =&gt; {}
      const login = () =&gt; {}
    
      useEffect(() =&gt; {
       // do auth stuff
       // setUserInfo({...})
       // setLoggedIn(true)
      }, [])
  
    return { userInfo, logout, login, isLoggedIn }
  }
  </code></pre>
  <p>I guess I can create AuthProvider and then get access to these values via useContext in my components.</p>
  <p>What's the difference between using just useAuth() instead of using useContext within AuthProvider?</p>
  <p>I guess It's better to use the second approach because useAuth() will run with useEffect on every component where I'm calling it where I can run useEffect only once in AuthProvider and share the retrieved state with useContext.</p>