How should I pass the result of a query to React Context

Help
,
1

My first intuition would be to pass directly the data to the context like so:

const AuthProvider = ({ children }: any) => {
  const { data, error, loading } = useQuery(GET_USER_PROFILE)

  if (loading) return null
  if (error) return null

  return (
    <AuthContext.Provider value={data.user}>
      {children}
    </AuthContext.Provider>
  )
}

But I see many examples over internet making use of useState() like so:

const AuthProvider = ({ children }: any) => {
  const [user, setUser] = useState(null) 
  const { data, error, loading } = useQuery(GET_USER_PROFILE)

  if (loading) return null
  if (error) return null

  if (data) {
    setUser(data.user)
  }

  return (
    <AuthContext.Provider value={user}>
      {children}
    </AuthContext.Provider>
  )
}

I wonder why many example are introducing useState. Does it play a role in updating the context value such as forcing re-render?

2

No, your first example is perfectly fine. Setting the state is an unnecessary extra step, and in fact it might even introduce an infinite render loop, depending on whether data.user is a scalar value or not.

3

Thank you mindnektar. I realized that useState is used when the data is fetched in useEffect and the data needs to be available outside the callback function