title: Custom hook not triggering component rerender despite changes in state
body: <p><strong>Context:</strong> I have a custom hook that fetches firestore documents. It watches for document changes, then returns it and the loading state. I'm using this hook in another component.</p>
  <p><strong>Problem:</strong> Changes to the state values returned by the hook (<code>loading</code> and <code>document</code>) do not trigger the component using the hook to rerender and see the updated values.</p>
  <p><strong>My Findings</strong>: Other custom hooks work and trigger renders, so there must be something wrong with the <code>useDocument</code> hook. If another hook triggers a rerender, only then will <code>loading</code> finally update. The values of <code>loading</code> and <code>document</code> indeed update as expected within the hook, but a rerender of the component is still never triggered.</p>
  <p><strong>Important Notes:</strong> <code>useFirebase()</code> is a hook called within <code>useDocument</code> whose state is lifted up into context using the <code>constate</code> library. So technically this hook is a consumer of some provider higher up the tree that keeps track of the firebase libraries. This is to avoid unnecessary network calls.</p>
  <pre><code>
  export function useDocument() {
    const { auth, firestore } = useFirebase() // asynchronously fetches firebase modules
    const [loading, setLoading] = useState(true)
    const [document, setDocument] = useState()
  
    let unsubscribe = null
  
    
  
    useEffect(() =&gt; {
      let unsubscribe = null
      const watchDocument = () =&gt;
        params?.query.onSnapshot(
          (doc) =&gt; {
            setDocument(doc.data() as T | undefined)
            setLoading(false)
          },
          (err) =&gt; {
            console.log(err)
  
            setError(err.message)
          }
        )
      if (firestore &amp;&amp; auth?.currentUser) {
        unsubscribe = watchDocument()
      }
      return () =&gt; {
        unsubscribe &amp;&amp; unsubscribe()
      }
    }, [firestore, auth?.currentUser])
  
    return {
      document,
      loading
    }
  }
  
  const MyComponent = () =&gt; {
    const {document, loading} = useDocument()
    console.log(loading) // changes to &quot;loading&quot; doesn't trigger rerender of this component
  }
  </code></pre>