Unexpected order of updates on data fetch

[stabback]

Describe the bug
I believe this is unexpected behaviour, however maybe it's intentional and just a bit confusing.

Given a simple use of useFetch:

function MyComponent() {
	const { loading, data } = useFetch('/some/data/source');

	console.log( { loading, data } );

 	if(loading) return <>Loading</>

	if(!data) return <>Nothing found!</>

	return <>Here's your {data}</>
}

The render cycle with a successful data response would result in the following log and three renders:

{ loading: true, data: null } // To be expected
{ loading: false, data: null } // Not loading anymore, but there's no data!
{ loading: false, data: { your: 'data' } } // The data is now populated

This middle render cycle with loading false and data (or error) still set to the previous value, or null for first render, makes it difficult to have a component trust the state of the fetch request. It also results in a flash of unwanted content, where your component renders incorrectly.

We caught this when we observed:

1. Our Sentry logs were reporting that our users were seeing 404 pages
2. In reality, they were just seeing a flash of a 404 page during first load. That render cycle was enough to trigger our error logging and was visible if you watched closely.

To Reproduce
I forked your demo and made the detail page simple:

1. Go to https://k7r4mz.csb.app/details
2. Open the console
3. Refresh the page
4. Observe the log lines - you will get a line with No data found with the request!

You can view the sandbox here, go to pages/details/details.page.tsx

Expected behavior
There should not be an interim state where loading is false but the result isn't set on data or error.

Additional context
If this is intended behaviour, a note on how to set up a page to avoid a flash of an unloaded state would be great. I want to avoid adding a block like if(result.loading || !result.data) return <Loading />, as the absence of data on a successful request could be a valid response.

[prc5]

Hey @stabback, change is indeed intentional, however I will handle it in a patch to be less confusing and give the instant value with the lifecycle 👍🏻

[prc5]

Oh wait, I missed the:

{ loading: false, data: null } // Not loading anymore, but there's no data!

This is not intentional and I will take a look to cover this bug 🐛