DEV Community

React Hooks for Data Part 1 - Fetching Data

bdbch on July 19, 2019

So the large hype on React Hooks is over and the community isn't talking about them that much anymore. But seriously hooks are beasts. In this post...

Read full post

Steven Liao • Jul 21 '19

I had recently implemented something similar to this.

const [loading, setLoading] = useState(false)

I did the same thing, initializing loading state to false. However, my coworkers argued that it could be

const [loading, setLoading] = useState(true)

because the Hook will eventually set loading state to true any way. I argued that the Hook isn't actually fetching until the effect runs, which is why I initialized loading state to false. I eventually gave in and initialized loading state to true because I felt like we were bikeshedding.

Anyway, what do you think?

Steven Liao • Jul 21 '19

Eventually found one good thing about initializing loading state to true. If the component using this custom fetch Hook rendered some other content, it won't flicker. In your case, this shouldn't happen though since BookList isn't rendering anything other than the fetched books.

bdbch • Jul 21 '19

That's true! I'll update the post and add your note to it.

Alexander Kim • Feb 4 '20

How do you deal with this part:

if (loading) return <div>Loading...</div>

This causes annoying flashing, before promise is resolved. Is there a way to show this loader inside actual markup, instead of this single element with Loading...?

Usman Khalil • Jul 20 '19

Loved your explanation. Can you describe useEffect in detail in next post. I couldn't understand the use case

bdbch • Jul 20 '19

Hey, thank you a lot.

I won't write about useEffect in the next post but I just wrote a quick explanation here:
dev.to/bdbch/a-quick-explanation-o...

Let me know if it helped you! :)

acc-repo1 • Jul 20 '19

Nice Article...

useful info, remarkable clarity, one small typo (closing paren):

    books.map(book => <div key={book.id}>{book.title}</div>);

bdbch • Jul 20 '19

Thank you very much! Fixed!

bdbch • Jul 20 '19

I'd say because of the comments which are cluttering the actual source code and the new way to update states etc.

Sebastien Lorber • Sep 3 '19

This code is subject to race conditions. Check my post about that subject here: dev.to/sebastienlorber/handling-ap...

thedevkim • Jan 30 '20 • Edited

what would be the pros and cons on using fetch vs axios ?