How / if does nextJS SWR re-renders page?

Question

Hi everyone have a question about nextJS and swr for client fetching.

This is a snippet of a code taken from official docs of SWR:

function Profile () {
  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>

  // render data
  return <div>hello {data.name}!</div>
}

My understanding is that isLoading is true when component renders. and there's no state setter or hook to trigger re-render of a page/component so page always shows loading...

Can anyone explain how this works?

How should I trigger re-render of page function when API call is complete?

Answer 1

issue was fixed by changing if (isLoading) return <div>loading...</div> to if (!data) return <div>loading...</div> this causes problems of its own in case errors, but page is not stuck.